JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <img src="http://placehold.it/700x400" alt="" class="center-img" />
</div>

CSS

img {
    display: block;
}
.parent {
    position: relative;
    overflow: hidden;
    padding-bottom: 40%; /* of parent width */
}
.center-img {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}