JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fotowind shadow"></div>

CSS

html, body {
    height: 100%;
}

.fotowind {
    background-image: url(http://www.insidegraphics.com/flash_mask/images/flash_tools_image.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px;
    width: 400px;
    border: 1px solid #f00;
}

JavaScript

$(document).on('ready', function () {
    var image_url = $('div.fotowind').css('background-image'),
        image;

    // Remove url() or in case of Chrome url("")
    image_url = image_url.match(/^url\("?(.+?)"?\)$/);

    if (image_url[1]) {
        image_url = image_url[1];
        image = new Image();
        image.src = image_url;
    }

    // just in case it is not already loaded
    $(image).load(function () {
        imgwidth = image.width;
        imgheight = image.height;

        if ($('div.fotowind').width() < imgwidth) {
            $('div.fotowind').css('background-size', '100% auto');
        } else if ($('div.fotowind').height() < imgheight) {
            $('div.fotowind').css('background-size', 'auto 100%');
        } else {
            $('div.fotowind').css('background-size', 'auto');
        }
    });
});