JSFiddle - React, Tailwind, and code Playground

by dvidby0

HTML

<div class="container">
    <!-- this is a landscape image-->
    <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
    <!--or use this portrait image
    <img src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Britishblue.jpg"/>
    -->
</div>

CSS

.container {
    width: 80%;
    height: 80%;
    position: absolute;    
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: #aaa;
    }
img {
    max-width: 100%;
    max-height: 100%;  
    position: absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }