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

Question

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

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

这将使图像大小灵活(即在较小的屏幕上缩小它们)。

但是我的4张图片是不同的宽度(但是它们的高度都是200px)，所以如果我使用上面的技术，它们的显示高度会根据它们的不同宽度而不同(这是我不想要的)。

我可以Photoshop所有4个图像成一个大的，但我更喜欢css的解决方案，因为它会使任何网站的图片更改更容易。

-稍后编辑：

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

​

​

​

​

首先是在宽/正常屏幕上显示的4个图像。第二个是在窄屏幕上显示时发生的情况。即最宽图片的高度减小(以及它们的宽度)。

我希望整个包装器div的高度缩小(当它因为显示在窄屏幕上而减少宽度时)- div中的图像高度缩小以与缩小的div相匹配。

Answer 1

将图片包装在div中，并使用宽度为25%的div设置样式。

图像应该是

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

希望这能解决你的问题。