이미지를 컨테이너 div에 넣으십시오.

Question

이미지가있는 컨테이너를 채우려고하는데 솔루션을 찾을 수 없습니다.

이미지가 너무 짧으면 전체 높이를 만들어야하지만 측면이 넘칠 수 있습니다. 이미지가 너무 좁 으면 이미지를 전체 너비로 만들어야하지만 하단이 넘칠 수 있습니다.

<div class="cb-img-fw four-image"> 
    <a href="postURL"><img src="imageURL"></a> 
</div> 

현재 CSS는

.four-grid-post > .four-image{ 
max-height: 184px; 
max-width: 271px; 
overflow: hidden; 
} 

.four-grid-post > .four-image img{ 
min-width: 100%; 
max-width: 100%; 
height: auto; 
} 

나는 또한 jQuery를 솔루션에 열려있어,하지만 아약스와 내 콘텐츠로드는 몇 가지 문제가 발생할 수 있습니다 있도록.

Answer 1

img을 CSS background으로 변경하는 것이 좋습니다.

.four-image { 
 
    display: block; 
 
    border: 1px solid gray; 
 
    width: 271px; 
 
    margin-bottom: 1em; 
 
} 
 

 
.four-image a { 
 
    display: block; 
 
    width: 271px; 
 
    height: 184px; 
 
    background-size: cover; 
 
    background-position: center center; 
 
}

<div class="cb-img-fw four-image"> 
 
    <a href="postURL" style="background-image: url('http://placehold.it/600x200');"></a> 
 
    600x200 
 
</div> 
 
<div class="cb-img-fw four-image"> 
 
    <a href="postURL" style="background-image: url('http://placehold.it/200x600');"></a> 
 
    200x600 
 
</div> 
 
<div class="cb-img-fw four-image"> 
 
    <a href="postURL" style="background-image: url('http://placehold.it/600x600');"></a> 
 
    600x600 
 
</div>

Answer 2

그 다음 당신이 배경 이미지 높이와 너비를 줄 수있는 배경 이미지 으로 이미지를 설정하고 배경의 크기를 커버 할 것입니다 스크립트 을 시도

var images = $(".four-image").find("img"); 
$.each(images, function (index, item) { 
var $item = $(item), 
src = $item.attr('src'), 
cont = $item.closest('.four-image').css('background-image', 'url(' + src + 
')'); 
});  

Answer 3

당신에게 object-fit 및 object-position CSS3 속성을 사용할 수 있습니다. Edge에서는 아직 지원되지 않지만 a polyfill이 있습니다. feature support on CanIUse을 참조하십시오.

.four-grid-post > .four-image { 
 
\t display: inline-block; 
 
\t height: 184px; 
 
\t width: 271px; 
 
\t overflow: hidden; 
 
\t border: dashed 2px red; 
 
} 
 

 
.four-grid-post > .four-image img { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t object-fit: cover; 
 
\t object-position: top center; /* To crop from the bottom */ 
 
}

<div class="four-grid-post"> 
 
\t <div class="cb-img-fw four-image"> 
 
\t \t <a href="postURL"><img src="http://placehold.it/400x300"></a> 
 
\t </div> 
 
\t <div class="cb-img-fw four-image"> 
 
\t \t <a href="postURL"><img src="http://placehold.it/400x200"></a> 
 
\t </div> 
 
\t <div class="cb-img-fw four-image"> 
 
\t \t <a href="postURL"><img src="http://placehold.it/300x400"></a> 
 
\t </div> 
 
</div>

[사용 방법 자동 크기 조정 사업부 컨테이너에 맞게 이미지를 (의