JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <img src="https://placekitten.com/g/800/600" alt="" class="cover" />
</div>

<div class="wrap">
    <img src="https://placekitten.com/g/450/200" alt="" class="cover" />
</div>

<div class="wrap">
    <img src="https://placekitten.com/g/300/500" alt="" class="cover" />
</div>

<div class="wrap">
    <img src="https://placekitten.com/g/250/250" alt="" class="cover" />
</div>

CSS

div{
    margin: 10px;
}

.wrap{
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 250px;
    border: 1px solid magenta;
}

.cover{
    position: absolute;
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
    margin: auto;
    width: 100%;
}