CSS로 이미지를 실제로 수정하는 것은 불가능하다는 것을 알고 있으므로 자르기를 따옴표로 묶습니다.
내가하고 싶은 것은 직사각형 이미지를 가져 와서 CSS를 사용하여 이미지를 전혀 왜곡하지 않고 사각형으로 보이게하는 것입니다.
기본적으로 이것을 돌리고 싶습니다.
이것으로 :
답변
그들이 IMG 태그에있을 필요가 없다고 가정하면 …
HTML :
<div class="thumb1">
</div>CSS :
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1:hover { YOUR HOVER STYLES HERE }편집 : div를 어딘가에 연결 해야하는 경우 HTML과 스타일을 다음과 같이 조정하십시오.
HTML :
<div class="thumb1">
<a href="#">Link</a>
</div>CSS :
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1 a {
display: block;
width: 250px;
height: 250px;
}
.thumb1 a:hover { YOUR HOVER STYLES HERE }예를 들어 % 너비 및 높이 등과 같이 반응 형으로 수정 될 수도 있습니다.
답변
래퍼 div나 다른 쓸모없는 코드가없는 순수한 CSS 솔루션 :
img {
object-fit: cover;
width:230px;
height:230px;
}답변
- div에 이미지를 배치하십시오.
- div에 정사각형 치수를 지정하십시오.
- div의 CSS overflow 속성을 hidden (
overflow:hidden)으로 설정하십시오. - 당신의 상상력을 div 안에 넣으십시오.
- 이익.
예를 들면 다음과 같습니다.
<div style="width:200px;height:200px;overflow:hidden">
<img src="foo.png" />
</div>답변
background-size : cover 사용 -http : //codepen.io/anon/pen/RNyKzB
CSS :
.image-container {
background-image: url('http://i.stack.imgur.com/GA6bB.png');
background-size:cover;
background-repeat:no-repeat;
width:250px;
height:250px;
} 마크 업 :
<div class="image-container"></div>답변
실제로 최근 에이 같은 문제가 발생하여 약간 다른 접근법으로 끝났습니다 (배경 이미지를 사용할 수 없었습니다). 이미지의 방향을 결정하기 위해 약간의 jQuery가 필요합니다 (하지만 대신 일반 JS를 사용할 수 있다고 확신합니다).
더 많은 설명에 관심이 있지만 코드가 매우 간단하다면 블로그 게시물을 작성했습니다 .
HTML :
<ul class="cropped-images">
<li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
<li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>CSS :
li {
width: 150px; // Or whatever you want.
height: 150px; // Or whatever you want.
overflow: hidden;
margin: 10px;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}jQuery :
$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});답변
이미지가 반응 너비 가있는 컨테이너에있는 경우 :
HTML
<div class="img-container">
<img src="" alt="">
</div>CSS
.img-container {
position: relative;
&::after {
content: "";
display: block;
padding-bottom: 100%;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}답변
비슷한 문제가 발생하여 배경 이미지가 “손상되지”않았습니다. 나는 이것을 생각해 냈습니다.
<div class="container">
<img src="http://lorempixel.com/800x600/nature">
</div>
.container {
position: relative;
width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
border: 2px solid #fff; /* just to separate the images */
overflow: hidden; /* "crop" the image */
background: #000; /* incase the image is wider than tall/taller than wide */
}
.container img {
position: absolute;
display: block;
height: 100%; /* all images at least fill the height */
top: 50%; /* top, left, transform trick to vertically and horizontally center image */
left: 50%;
transform: translate3d(-50%,-50%,0);
}
//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});도움이 되었기를 바랍니다!