JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="img"><div class="img"><img src="http://placekitten.com/600/300"></div></div>
</div>

CSS

body{

}
.wrap{
    height: 500px;
    width: 300px;
    margin: 0 auto;     
    background-color: red;
}
.img {
    position:absolute;
    right:50%;
    margin:0 -300px 0 0;
    min-width:300px;
    max-width:600px;
    width:100%;
    height:300px;
}
.img .img {
    position:absolute;
    overflow:hidden;
    left:50%;
    margin:0 0 0 -600px;
    min-width:300px;
    max-width:600px;
    width:100%;
    height:300px;
}
img {display:block}