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

The gist of the approach I'd take is to figure out how big your frame is, and figure out how wide the sum of your imgs are. Then, using a ratio of those totals, resize each of the images.

$(document).ready(function(){
var frameWidth = $("div.imgs").width()
var totalImgWidths = $("img#img1").width() + $("img#img2").width() + $("img#img3").width()
var ratio = frameWidth / totalImgWidths
var fudge = .95

$("img#img1").width(Math.floor($("img#img1").width() * ratio * fudge) )
$("img#img2").width(Math.floor($("img#img2").width() * ratio * fudge) )
$("img#img3").width(Math.floor($("img#img3").width() * ratio * fudge) )
})

See a quick plunker I quickly wrote up. It's not fancy, and it's employing a bit of a fudge factor, so I'm happy if anyone can improve on it.