JSFiddle - React, Tailwind, and code Playground

HTML

First Solution:
<div class="imageParent">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" />
</div>

<hr />

Solution using <code>object-fit: cover</code>
<div class="imageParentCover">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" />
</div>

CSS

.imageParent, .imageParentCover {
    position:relative;
    text-align:center;
    width:200px;
    height:200px;
    overflow:hidden
}
.imageParent img {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
.imageParentCover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}