html - 你如何重新缩放 HTML/CSS 中的图像以具有相同的高度？

Question

我在可变宽度的 div 中有(一组)两个不同大小和形状的图像。我想重新缩放图像以具有相同的高度，同时保持它们相同的纵横比。

我希望这段代码(参见 fiddle)会导致两个图像与父 div 具有相同的高度。

<div style="width:75%">
  <img style="height:100%" src="blue_rectangle" />
  <img style="height:100%" src="red_square" />
</div>

如果这是最简单的解决方案，我很乐意使用表格。

编辑:澄清一下，结果应该类似于下面 misterManSam 的解决方案，随着页面宽度的增加，图像的大小(但不是形状)也会增加。

Answer 1

根据您的其余内容，您可以使用视口(viewport)的宽度 控制图像的高度，使用viewport-width (vw)长度。最大和最小高度确保图像不会变得太大。

兼容性: Mostly good — IE9+ and the most common browsers support vw

例子

注意:示例中提供的每个图像都有不同的透明边框宽度。黑色背景显示实际图像宽度和高度。

img {
  height: 20vw;
  background: #000;
  max-height: 200px;
  min-height: 100px;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Rectangle_example.svg/200px-Rectangle_example.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Basic_square.svg/200px-Basic_square.svg.png" />