JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer-frame">
    <div id="image-frame">
        <img src="http://fc01.deviantart.net/fs50/f/2009/317/f/4/Colour_Spiral_by_Deatant2.jpg" alt="Spiral by Deatant2" width="1280" height="736" />
    </div>
</div>
<!--<div id="controls">
    Width: <input type="text" id="iwidth" name="iwidth" value="200" />
    Height: <input type="text" id="iheight" name="iheight" value="200" />
</div>-->

CSS

/* #outer-frame { width: 500px; height: 500px; margin: 10px; border: 1px dashed black; } */

html,
body {
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

#image-frame { width: 100%; min-height: 100%; max-height:100%; overflow: hidden; position: relative; }
/*#image-frame { width: 200px; height: 200px; overflow: hidden; position: relative; }*/
#image-frame img { position: relative; }

/*#controls { margin: 10px 10px 0 10px; }
#controls input { width: 80px; }*/

JavaScript

$('#image-frame').bind('reposition-image', function() {
    var imageFrame = $(this);
    //var outerFrame = $('#outer-frame');
    var image = imageFrame.find('img');

    var frameWidth = imageFrame.width();
    var frameHeight = imageFrame.height();

    // center image frame
    // What do I do here???????
    imageFrame.css({ left: (outerFrame.width() / 2) - (imageFrame.width() / 2),
                     top:  (outerFrame.height() / 2) - (imageFrame.height() /2)});

    // position image in frame
    image.css({ left: (imageFrame.width() / 2) - (image.attr('width') / 2),
                top: (imageFrame.height() / 2) - (image.attr('height') / 2)});
}).trigger('reposition-image');

$('#controls input').change(function() {
    var jThis = $(this);
    var cDim = jThis.attr('id').replace(/^i/, '');

    var nSize = parseInt(jThis.val());

    if (!isNaN(nSize) && nSize != 0) {
        var outerFrame = $('#outer-frame');
        nSize = (nSize > outerFrame[cDim]() ? outerFrame[cDim]() : nSize);        
        $('#image-frame')[cDim](nSize).trigger('reposition-image');
    }
});