Autosizing images based on aspect ratio
HTML
<div class="container">
<img src="http://placekitten.com/240/300">
</div>
<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">
CSS
.container {
background-color:#000;
width:100px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
JavaScript
$(".container").each(function(){
var divH = $(this).height()
var divW = $(this).width()
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < (divW/divH)) {
$(this).addClass("1");
var newW = $(this).width();
var newH = (newW/imgW) * imgH;
$(this).children("img").width(newW);
$(this).children("img").height(newH);
} else {
$(this).addClass("2");
var newH = $(this).height();
var newW = (newH/imgH) * imgW;
$(this).children("img").width(newW);
$(this).children("img").height(newH);
}
})