JSFiddle - React, Tailwind, and code Playground

by arunzo

HTML

<div id="container">
    <img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>

CSS

#container {
    position:absolute;
    overflow: hidden;
    width: 500px;
    height: 200px;
    transition: all .5s;
    left:50%;
    top:50%;
    -webkit-transform:translate3d(-50%,-50%,0);
    object-fit:cover;
}
#container.skinny {
    width: 200px;
    height:300px;
}



#img {
    max-width:100%;
    min-height:100%;
    position:relative;
    left:50%;
    top:50%;
    -webkit-transform:translate3d(-50%, -50%, 0);
}

.skinny>img
{
    max-width:none !important;
    min-height:none !important;    
    max-height:100%;
    -webkit-transform:translate3d(+50%, +50%, 0);
}

JavaScript

var toggle = false,
    containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");