JSFiddle - React, Tailwind, and code Playground

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

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");