JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="outer">
    <div id="inner">
        <img src="http://www.webkit.org/blog-files/acid3-100.png" />
    </div>
</div>
</body>

CSS

html,body{
    height:100%;    
}
#outer{
    background-color:red;
    height:100%;
}
#inner{
    background-color:orange;
    max-height:50%;
    height: 50%;
}
img{
    max-width:100%;
    max-height:100%;
}
}