css - 具有一致高度的不同宽度的响应图像

Question

我翻阅了之前的回复，但似乎找不到确切的答案。

我希望创建一个容器 div，它可以容纳具有相同边距的不同宽度的图像。我想保持一致的高度，因为图像会随着 div 的宽度因浏览器大小而扩展和收缩而调整大小。

我有一个 jsfiddle，但无法弄明白:https://jsfiddle.net/s8p4wv8m/

 max-width: 100%;
 height: auto;

有没有我遗漏的高度？

我可以获得响应部分，但我希望在浏览器调整大小时不影响纵横比的情况下使所有图像的高度保持一致。

图像也不一定在网格系统上——它们的宽度会有所不同。

非常感谢。

Answer 1

您可以添加“最大高度:62px；”将所有图像限制为最短图像的高度的所有 img，因此在你的 fiddle 示例中......是“62px”