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>

<div style="clear:both;"></div>
<div class="container">
    <div class="image one"> </div>
</div>    
<div class="container">
    <div class="image two"> </div>
</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;} */

.image { width: 150px; height: 150px; background-size: contain; }
.one { background: url(http://lorempixel.com/100/150) no-repeat; }
.two { background: url(http://lorempixel.com/150/100) no-repeat; }