JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <img src="http://i.stack.imgur.com/vNQ2g.png" alt="example" title="example" />
</div>
<div class="cover"></div>

CSS

html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}
.wrap {
    overflow: hidden;
    height:50%;
    width:50%;
}
.cover {
    background: url("http://i.stack.imgur.com/vNQ2g.png") no-repeat scroll 0% 0% / cover transparent;
    height:50%;
    width:50%;
}

JavaScript

function back() {
     var h = $('img').parent().height(),
         w = $('img').parent().width();

     if (w <= h) {
         $('img').each(function () {
             $(this).css({
                 height: $(this).parent().height(),
                 minHeight: $(this).parent().height(),
                 minWidth: $(this).parent().width(),
                 width: 'auto'
             });
         });
     } else {
         $('img').each(function () {
             $(this).css({
                 width: $(this).parent().width(),
                 minHeight: $(this).parent().height(),
                 minWidth: $(this).parent().width(),
                 height: 'auto'
             });
         });
     }
 };

 $(window).load(back());
 $(window).resize(function () {
     back();
 });