Scale different width images to fit a row and maintain equal height

Question

I have three images which are all different widths, but each the same height.

I want these images to be in a responsive row so that the

Answer 1

You might want to use this a basis for refining a solution:

https://jsfiddle.net/kb4gg35f/

For some reason this does not work as a snippet. It works as a fiddle, though.

var images = $('img');
var accumulatedWidth = 0;
var widthResizeFactor;
var screenWidth = $('div').width();
var originalSizeArray = [];
$(document).ready(function() {
  for (var i = 0; i < images.length; i++) {
    var theImage = new Image();
    theImage.src = images[i].src;
    accumulatedWidth += theImage.width;
    originalSizeArray.push(theImage.width);
  }
  widthResizeFactor = screenWidth / accumulatedWidth;
  for (var i = 0; i < images.length; i++) {
    images[i].width = originalSizeArray[i] * widthResizeFactor;
  }
});

body {
  margin: 0;
}
div:after {
  content: "";
  display: table;
  clear: left;
}
img {
  float: left;
}