JSFiddle - React, Tailwind, and code Playground

by thefrontender

HTML

<p>After CSS crop</p>
<ul class="thumblist">
    <li><img src="http://lorempixel.com/200/200" alt="" /></li>
    <li><img src="http://lorempixel.com/400/400" alt="" /></li>
    <li><img src="http://lorempixel.com/400/800" alt="" /></li>
    <li><img src="http://lorempixel.com/100/100" alt="" /></li>
    <li><img src="http://lorempixel.com/400/200" alt="" /></li>
</ul>
<p>Before CSS crop</p>
<ul>
    <li><img src="http://lorempixel.com/200/200" alt="" /></li>
    <li><img src="http://lorempixel.com/400/400" alt="" /></li>
    <li><img src="http://lorempixel.com/400/800" alt="" /></li>
    <li><img src="http://lorempixel.com/100/100" alt="" /></li>
    <li><img src="http://lorempixel.com/400/200" alt="" /></li>
</ul>

CSS

.thumblist {
    padding: 0;
    margin: 0;
    list-style: none;
}

.thumblist li {
    float: left;
    height: 200px;
    width: 200px;
    margin: 5px;
    overflow: hidden;
}

.thumblist img {
    display: inline-block;
    min-width: 100%;
    min-height: 100%;
    -ms-interpolation-mode: bicubic; /* Better image scaling in IE */
}

p {
    clear: both
}