JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img id="makeMeStretch" src="http://mothersmessenger.files.wordpress.com/2012/06/smiling-light-bulb-md222.png?w=604" />
    </div

CSS

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#container {
    width: 90%;
    height: 90%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
}
#makeMeStretch {
    max-height: 100%;
    max-width: 100%;
    background: #FFF;
}

JavaScript

//
// simple version of what I have right now without centering
// JSFIDDLE doesnt calculate overflow correctly when resizing? 
//

/*
var makeMeStretch = document.getElementById('makeMeStretch'),
    makeMeStretchStyle = makeMeStretch.style,
    container = document.getElementById('container');

makeMeStretchStyle.maxHeight = "none";
makeMeStretchStyle.maxWidth = "none";
makeMeStretchStyle.width = "100%";
makeMeStretchStyle.height = "auto";

function doStuff() {
    if (makeMeStretch.clientHeight > container.clientHeight) {
        makeMeStretchStyle.height = "100%";
        makeMeStretchStyle.width = "auto";
    } else if (makeMeStretch.clientWidth > container.clientWidth) {
        makeMeStretchStyle.height = "auto";
        makeMeStretchStyle.width = "100%";
    }
}
doStuff();
window.onresize = reSize;
//*/