JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hat">
    <img src="http://451heat.com/wp-content/uploads/2010/12/TopHatAround1905.jpg" />
</div>

<div id="background-cover-hat">
    
</div>

<div id="tie">
    <img src="http://www.jamesbondlifestyle.com/sites/default/files/styles/fancybox_popup/public/images/product/cl048-turnbull-asser-tie-dad-blue-circles.jpg?itok=aW_VifLK" />
</div>

<div id="background-cover-tie">
    
</div>

CSS

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}

#background-cover-hat {
    background: url(http://451heat.com/wp-content/uploads/2010/12/TopHatAround1905.jpg);
    background-size: cover;
}
#background-cover-tie {
    background: url(http://www.jamesbondlifestyle.com/sites/default/files/styles/fancybox_popup/public/images/product/cl048-turnbull-asser-tie-dad-blue-circles.jpg?itok=aW_VifLK);
    background-size: cover;
}

JavaScript

$(function () {
    
    var makeBackgroundCover = function (div) {
        $(div + " img").css("height", "100%");
        if ($(div + " img").width() < $(div).width()) {
            $(div + " img").css({
                "height": "auto",
                "width": "100%"
            });
        }
    }
    
    makeBackgroundCover("#hat");
    makeBackgroundCover("#tie");
});