JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src="http://lorempixel.com/100/200" />
    <img src="http://lorempixel.com/200/200" />
    <img src="http://lorempixel.com/400/200" />
</div>
<p>&nbsp;</p>

CSS

body {
    margin: 0;
}
div:after {
    content:"";
    display: table;
    clear: left;
}
img {
    float: left;
}
p {
    height: 20px;
    background-color: #eee;
}

JavaScript

var images = $('img');
var accumulatedWidth = 0;
var widthResizeFactor;
var screenWidth = $(document).width();
var oringinalSizeArray = [];
$(document).ready(function () {
    for (var i = 0; i < images.length; i++) {
      var theImage = new Image();
      theImage.src = images[i].src;  
      accumulatedWidth += theImage.width;
      oringinalSizeArray.push(theImage.width);
    }
    widthResizeFactor = screenWidth / accumulatedWidth;
    for (var i = 0; i < images.length; i++) {
      images[i].width = oringinalSizeArray[i]*widthResizeFactor;
    } $('p').text(screenWidth+":"+accumulatedWidth+"="+Number(widthResizeFactor).toFixed(3));
});