JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<img src="http://www.htmlgoodies.com/img/2010/11/jquery.jpg" />
</div>
CSS
div{ width: 280px; height: 280px; border: 1px solid #f00; text-align: center; vertical-align: middle; display: table-cell; }
JavaScript
$(function(){
var max_size = 130;
$("div img").each(function() {
if ($(this).height() > $(this).width()) {
var h = max_size;
var w = Math.ceil($(this).width() / $(this).height() * max_size);
}
else{
var w = max_size;
var h = Math.ceil($(this).height() / $(this).width() * max_size);
}
$(this).css({'height': h, 'width': w});
});
});