JSFiddle - React, Tailwind, and code Playground
HTML
<p>Using only CSS...</p>
<div class="container">
<div class="imgwrapper"><img src="http://lorempixel.com/300/200" /></div>
<div class="imgwrapper"><img src="http://lorempixel.com/200/250" /></div>
<div class="imgwrapper"><img src="http://lorempixel.com/200/200" /></div>
</div>
<p>Using jQuery...</p>
<div id="container2">
<img src="http://lorempixel.com/300/100" />
<img src="http://lorempixel.com/200/250" />
<img src="http://lorempixel.com/200/200" />
</div>
<div style="width:598px;text-align:center;border:1px solid #000;margin:10px;">600px</div>
CSS
.container{
width: 600px;
margin: 10px;
background-color: #000;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.imgwrapper {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
img{
max-width: 100%;
height: auto;
display:block;
}
/* Below here is just for the jQuery solution */
#container2{
width: 600px;
margin: 10px;
overflow: hidden;
}
#container2 img{float:left;}
JavaScript
/* Code just for the jQuery solution */
var container_width = $('#container2').width();
var container_width_temp = 0.0; // must be float!
var container_height = 50.0; // random initial container heigth for calculations
$('#container2 img').each(function(){
var newwidth = (this.width / this.height) * container_height;
this.width = newwidth;
$(this).data('width', newwidth); // store this here because width attribute is an int and not a float, and you don't want to loose precision here!
container_width_temp += newwidth;
});
$('#container2 img').each(function(){
this.width = $(this).data('width') * (container_width / container_width_temp);
});
// this should be done as a jquery plugin so you can apply this to multiple containers