JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center-cropped" 
     style="background-image: url(http://placekitten.com/300/200);">
</div>

<div style="width:300px;height:200px;background-image: url(http://placekitten.com/300/200);">
</div>

<br><br>

<div class="portion-center-cropped" 
     style="background-image: url(http://placekitten.com/300/200);">
</div>
<div style="width:300px;height:200px;background-image: url(http://placekitten.com/300/200);">
</div>

CSS

div {
    display: inline-block;
}

div.center-cropped {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

div.portion-center-cropped {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
 
}