JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <img id="image" src="http://www.hdwallpapersgo.com/wp-content/uploads/2013/05/Beach-Landscape-Wallpaper-Exotic-1280x1024.jpg" width="413" height="325">
</div>

CSS

div {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid;
    position: relative;
}
img {
    position: absolute;
    z-index: -1;
}

JavaScript

//collect the nodes
var img = $('#image');
var parent = img.parent();

//remove width and height attributes
img.removeAttr('width');
img.removeAttr('height');

//set initial width
img.attr('width', parent.width());

//if it's not enough, increase the width according to the height difference
if (img.height() < parent.height()) {
    img.css('width', img.width() * parent.height() / img.height());
}

//position the image in the center
img.css({
    left: parseInt((img.width() - parent.width())/-2) + 'px',
    top: parseInt((img.height() - parent.height())/-2) + 'px'
});