JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img id="img" src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg" />
</div>

CSS

#container {
    position: absolute;
    overflow: hidden;
    width: 400px;
    height: 200px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transition: all .5s;
}
#container.skinny {
    width: 200px;
    height: 600px;
}
#img {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    position: relative;
    left: 50%;
    top: 50%;
    -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");