JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class='frame'>
    <img src='http://lorempixel.com/output/animals-q-g-400-200-2.jpg' />
</div>
<div class='frame'>
    <img src='http://lorempixel.com/output/nature-h-g-200-400-8.jpg' />
</div>
<div class='frame'>
    <img src='http://lorempixel.com/output/abstract-q-g-200-150-4.jpg' />
</div>
<div class='frame'>
    <img src='http://lorempixel.com/output/food-h-g-150-200-3.jpg' />
</div>
<div class='frame'>
    <img src='http://lorempixel.com/output/nature-q-g-300-100-7.jpg' />
</div>
<div class='frame'>
    <img src='http://lorempixel.com/output/nightlife-h-g-100-200-9.jpg' />
</div>

CSS

.frame {
        width:300px;
        height:300px;
        display:inline-block;
        border:1px solid teal;
        position:relative;
    }
    .frame > img {
        max-width:100%;
        max-height:100%;
        width:auto;
        height:auto;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }