html - 响应图像大小 100% 但最大宽度

Question

我创建了一个响应式网站，图像设置为:

max-width: 100%;
height: auto;

这很棒，可以针对不同的屏幕设备和窗口缩放调整图像大小。然而，我的图像大小不同，但有 5-30 像素的差异。有没有办法让它们的高度和宽度都相同，而且还能自动缩放。

我试过添加 height="170"和 width="190"但这似乎不起作用。

如何在不手动调整所有图像大小的情况下将它们设置为相同大小。

例子在这里； http://www.cartoonquiz-answers.com/Solutions/Level8

正如您在上方看到的答案“King Julien”的图片稍大，因此下一行使用一张图片，而不是每行填充 4 张图片。

谢谢

Answer 1

如果你想强制所有图片的大小相同，只需设置一个通用的 CSS 规则:

img
{
    width: 190px;
    height: 170px;
}

---

如果您希望它们按比例缩放，请改用百分比:

img
{
    width: 100%;
}

这将强制所有图像填充它们的容器(并保持它们的宽高比)。