title: Scale different width images to fit a row and maintain equal height
body: <p>I have three images which are all <strong>different widths</strong>, but each the <strong>same height</strong>.</p>
  
  <p>I want these images to be in a responsive row so that the combined width of these three images is 100% the width of the screen, all of the images have equal height, each image maintains its aspect ratio, and the images are not cropped.</p>
  
  <p>One way to do it would be to set a different percentage width for each image in CSS, based upon each image's width according to the others. But I'm curious about a smarter way, probably using JavaScript/jQuery, which would be more efficient for doing this type of thing at a larger scale.</p>