JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap smpl1 layout"></div>

<img src="https://placekitten.com/g/400/500" alt="">
    
<hr>
    
<div class="wrap smpl2 layout"></div>

<img src="https://placekitten.com/g/400/200" alt="">
    
<hr>

CSS

.wrap{
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.smpl1{
    background-image: url(https://placekitten.com/g/400/500) ;
}
.smpl2{
    background-image: url(https://placekitten.com/g/400/200) ;
}

.layout{
    float: left;
    margin-right: 10px;
    border: 1px solid navy;
}

hr{
    clear: left;
}