动态地将不同尺寸的并排图像调整为相同的高度

我在块级容器中有两个并排的图像，尺寸任意不同（例如，它们可以是任意两个图像），我想动态调整其宽度，以便两个图像的总高度是相同的。我不think从我所见过的一切中，这都可以在 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>

EDIT:我不想在容器元素上设置静态高度，因为这会阻止它响应整个页面的宽度，以便图像彼此动态调整大小and响应于页面的宽度，因此无论使用何种查看设备，它们的总组合宽度始终（例如）页面宽度的 80%。

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

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>