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

Question

我在页面上有 4 张图片(在包装器 div 内)并希望它们根据屏幕尺寸/宽度调整大小。 通常的方法是设置 css:

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

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

但是我的4张图片宽度不一样，(但是它们的高度都是200px) 因此，如果我使用上述技术，它们显示的高度会根据它们的各种宽度(我不想要)而变化。

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

------------稍后编辑:----------------

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

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

我希望整个包装 div 的高度缩小(当它由于在窄屏幕上显示而宽度减小时)- 并且 div 中的图像高度缩小以匹配缩小的 div 上的高度。

Answer 1

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

图片应该是

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

希望这能解决您的问题。