Bildanpassung in Container div

Question

Ich versuche, Container mit Bildern zu füllen, aber ich kann die Lösung nicht finden.

Wenn Bilder zu kurz sind, muss ich sie voller Höhe machen, aber sie können die Seiten überlaufen. Wenn Bilder zu schmal sind, muss ich ihnen die volle Breite geben, aber sie können den Boden überlaufen.

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

und aktuelle 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; 
} 

Ich bin auch zu jQuery Lösungen offen, aber meine Inhalte Lasten mit Ajax so könnte es einige Probleme verursachen.

Answer 1

Ich schlage vor, die img auf der css background zu ändern.

.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

versuchen, dieses Skript es Ihr Bild als Hintergrundbild eingestellt werden dann können Sie Höhe und Breite auf Hintergrundbild geben und es Hintergrund Größe Abdeckung

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

Sie machen kann object-fit und object-position CSS3 Eigenschaften verwenden. Sie werden in Edge noch nicht unterstützt, aber es gibt a polyfill. Siehe 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>