JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />
</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 {
    background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
    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" : "");
}