javascript - 将具有不同尺寸的并排图像动态调整为相同高度

Question

我在一个 block 级容器中并排放置了两个图像，它们具有任意不同的尺寸(例如，它们可以是任意两个图像)，我想动态调整它们的宽度，以便两个图像的总高度图像是一样的。我不认为这可以在我所看到的一切中用 CSS 完成(虽然可能使用 flexbox 模型，但我对它的了解还不够多)所以我可能需要一个 JavaScript解决方案，但我想出的那些失败了，因为要么不知道边界框的整体高度，要么调整图像的高度会影响边界框的高度，这意味着它会不断地重新调整自己。

这是一个任意图像高度的例子:https://jsfiddle.net/c6h466xf/

这就是我想要实现的目标(尽管显然没有对宽度进行硬编码，但我希望动态解析这些宽度):https://jsfiddle.net/c6h466xf/4/

这就是我开始的地方(链接到 JSFiddle 需要代码):

CSS

div.container {
    width: 100%;
}

 div.container img {
    width: 49%;
 }

HTML

<div class="container">
    <img src="http://i.imgur.com/g0XwGQp.jpg">
    <img src="http://i.imgur.com/sFNj4bs.jpg">
</div>

编辑: 我不想在容器元素上设置静态高度，因为这会阻止它响应整个页面的宽度，以便图像相互动态调整大小和响应页面的宽度，因此无论使用何种查看设备，它们的总组合宽度总是(例如)页面宽度的 80%。

Answer 1

如果它是响应式的，使用百分比高度和宽度:

html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}
div.container img {
  max-height: 100%;
}

<div class="container">
  <img src="http://i.imgur.com/g0XwGQp.jpg" />
  <img src="http://i.imgur.com/sFNj4bs.jpg" />
</div>