JSFiddle - React, Tailwind, and code Playground

HTML

<h5>big</h5>
<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

<h5>small</h5>
<div class="center-cropped">
    <img src="http://placehold.it/50x50" alt="" />
</div>

<h5>long</h5>
<div class="center-cropped">
    <img src="http://placehold.it/200x100" alt="" />
</div>

<h5>high</h5>
<div class="center-cropped">
    <img src="http://placehold.it/100x200" alt="" />
</div>

CSS

div.center-cropped {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
div.center-cropped img {
    width: 100%;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}