div内的图像在调整屏幕大小时不会调整大小

Question

好吧，让我试着解释这个问题。 我有3个div，每个都有相同的宽度和相同的最大高度。 当我调整屏幕大小时，这些div内的图像尺寸相同（保持其尺寸比例）。 问题是，并不是所有的图像都是相同的大小，这导致并非所有的div都调整正确。他们倾向于从图像中获得高度，图像的高度和宽度都不尽相同。

This is how the issue looks like.

It should be like this

希望这是有道理的。

干杯，

Answer 1

因为你说每个div有定义的高度，你可以给所有的图像
height: 100%;防止图片来自拉伸你也可以给他们
"object-fit:cover"。 注意到对象适配对IE的支持很差。 这样，你的所有图像将填满整个div而不会损害它们的比例。

如果您需要支持Internet Explorer，也许您应该考虑background-image，backgorund-size：cover for this case;

Answer 2

试试这个

<div class="container"> 
    <div class="images"> 
     <img src="http://placehold.it/350x150"> 
    </div> 
    <div class="images"> 
     <img src="http://placehold.it/350x350"> 
    </div> 
    <div class="images"> 
     <img src="http://placehold.it/350x250"> 
    </div> 
</div> 

.container { 
    display: flex; 
} 

.images img { 
    min-height: 200px; 
    max-width: 200px; 
    min-width: 100%; 
} 

现场演示 - https://jsfiddle.net/grinmax_/h02a31df/