I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in CSS from everything I've seen (although possibly with the flexbox model, but I don't know enough about it to say) so I may need a JavaScript solution, but the ones I came up with failed due to either not knowing the overall height of the bounding box, or the fact that adjusting the height of the images affected the height of the bounding box which meant it was constantly re-adjusting itself.
This is an example of arbitrary image heights: https://jsfiddle.net/c6h466xf/
And this is what I'm trying to achieve (although obviously without hard-coding the widths, I want those to be resolved dynamically): https://jsfiddle.net/c6h466xf/4/
This is what I'm starting with (links to JSFiddle need code):
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: I don't want to set a static height on the container element, because that stops it from responding to the width of the overall page, so that the images resize dynamically to each other and responsively to the width of the page, so their total combined width is always (for example) 80% of the page width whatever the viewing device.
