JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>

CSS

div{
    position:relative;
    width:22%;
    padding-bottom:22%;
    margin:1%;
    float:left;
    overflow:hidden;
}
img{
    position:absolute;
    height:100%; width:auto;
    top:0;left:-50%;right:-50%;
    margin:auto;
}