JSFiddle - React, Tailwind, and code Playground

by demchak_alex

HTML

<div class="container">
    <img class="tall" src="http://lorempixel.com/100/150" />
</div>
<div class="container">
    <img class="wide" src="http://lorempixel.com/150/100" />
</div>

CSS

.container { float: left; width: 150px; height: 150px; overflow: hidden; }

.container img.tall {min-height: 150px; max-height:150px;}
.container img.wide {min-width: 150px; max-width: 150px;}

/* Uncomment this and delete/comment out the above to see a "fill the box" scaling */

/* .container img.wide {min-height: 150px; max-height:150px;}
.container img.tall {min-width: 150px; max-width: 150px;} */