如何使HTML/CSS中的图像具有相同的高度？

Question

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

我希望这段代码(参见小提琴)将使这两个图像具有与父div相同的高度。

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

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

编辑：为了澄清，结果应该看起来像下面的misterManSam的解决方案，随着页面宽度的增加，图像的大小(而不是形状)增加。

Answer 1

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

Compatibility: 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" />

​

Answer 2

我可能误解了你的问题，但这难道不是让它们保持同样高度的一种方法吗？http://jsfiddle.net/nakx7pee/2/

div{
    width:75%;
    height:8em;
}
img{
    display:inline-block;
    height:100%;
    width:auto;
    background:yellow; /* to show: same height */
}

(您没有提供任何有关div高度的信息)