JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <img src="http://placehold.it/350x350" id="image">
</div>

CSS

#wrapper
{
    position: relative;
    width: 50%;
    overflow: hidden;
}

#wrapper:before
{
    content: "";
    display: block;
    padding-top: 75%;
}

#image
{
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
    height: 100%;
    width: 100%;
}