JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <img id="my-img" src="http://www.photo-dictionary.com/photofiles/list/455/831column.jpg"/>
</div>

<!-- <div class="container">
    <img id="my-img" src="http://www.thisisharz.com/train-banner.jpg"/>
</div> -->

CSS

.container {
    width:200px;
    height:200px;
    display:block;
    position:relative;
    overflow:hidden;
}
.container img {
    position:absolute;
    top:0;
    left:0;
}

JavaScript

function myTest() {
    var imgH = $("#my-img").height();
    var imgW = $("#my-img").width();
    if(imgW > imgH) {
        $(".container img").css("height", "100%");
        var conWidth = $(".container").width();
        var imgWidth = $(".container img").width();
        var gap = (imgWidth - conWidth)/2;
        $(".container img").css("margin-left", -gap);
    } else {
        $(".container img").css("width", "100%");
        var conHeight = $(".container").height();
        var imgHeight = $(".container img").height();
        var gap = (imgHeight - conHeight)/2;
        $(".container img").css("margin-top", -gap);
    }
}

myTest();