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

Question

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

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

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

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

我可以将所有4张图片分成一个大图像，但更喜欢使用css解决方案，因为它可以让以后的网站图片更改更容易。

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

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

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

我希望整个包装器div在高度上缩小（当它由于在窄屏幕上显示而减小宽度时） - 并且div内的图像在高度上缩小以匹配收缩div上的图像。 / p>

Answer 1

将图像包装在一个div中并设置宽度为div的样式：25％，

和图像应

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

希望这能解决您的问题。