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，也许您应该考虑背景图片，backgorund-size：这个案例的封面;

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/

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

2 个答案: