如何根据屏幕尺寸自动调整页面上 4 个不同宽度的图像大小

Question

我在页面上有 4 个图像（在包装 div 内），并希望它们根据屏幕大小/宽度调整大小。 通常的方法是设置 css:

img {
    max-width: 25%;     /* i.e. each pic = 1/4  */
    height: auto;
}

这将使图像尺寸灵活（即在较小的屏幕上缩小它们）。

但我的 4 张图片的宽度不同，（但它们的高度都是 200 像素） 因此，如果我使用上述技术，它们显示的高度会根据它们的不同宽度（我不想要）而变化。

我可以将所有 4 张图片 Photoshop 合并为一张大图片，但我更喜欢 CSS 解决方案，因为它可以让以后的网站图片更改更容易。

---------稍后编辑：-----

我会尝试更好地展示这个问题......

首先是宽屏/普通屏幕上显示的 4 张图像。 第二是在窄屏幕上显示时会发生什么。即最宽图片的高度会减小（以及它们的宽度）。

我希望整个 wrapper div 的高度缩小（当它由于显示在窄屏幕上而减小宽度时）- div 中的图像的高度缩小以匹配缩小的 div 上的高度。

Answer 1

将您的图像包装在一个 div 中，并将 div 的样式设置为 width:25%，

图片应该是

img {
    max-width: 100%;
    height: auto;
}

希望这能解决您的问题。