JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="inner"><img class="img" src="http://www.reactiongifs.com/wp-content/uploads/2012/07/H0NUE.gif" /></div>
</div>

CSS

.wrapper{
    padding-top:50%;
    height:0;
    position: relative;
}
.inner {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
.img {width: 100%; height: 100%}