JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<img src="https://i.scdn.co/image/9c4880556288e2f4d098a104f5125e477611be32" />
</div>
CSS
#container {height: 250px; width: 250px; overflow: hidden; position: relative;}
.landscape {position: absolute; height: 100%; left: 50%}
.portrait {width: 100%;}
JavaScript
$(function() {
var $img = $('img'),
$imgHeight = $img.height(),
$imgWidth = $img.width();
if ($imgWidth > $imgHeight) {
$img
.addClass('landscape')
.css({
marginLeft: '-' + $img.width() / 2 + 'px',
})
} else {
$img.addClass('portrait');
}
});