JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<h1>Original images :</h1>
<h3>Landscape: (400x200)</h3>
<div>
    <img src="http://placekitten.com/400/200" alt="landscape"/>
</div>
<p></p>
<h3>portrait (200x400)</h3>
<div>
    <img src="http://placekitten.com/200/400" alt="potrait"/>
</div>

<h1>Images resized to (60x60) using css :</h1>
<h3>Landscape: (400x200)</h3>
<div class="crop crop-landscape">
    <img src="http://placekitten.com/400/200" alt="landscape"/>
</div>
<p></p>
<h3>portrait (200x400)</h3>
<div class="crop crop-potrait">
    <img src="http://placekitten.com/200/400" alt="potrait"/>
</div>

CSS

.crop {
    width: 60px;
    height:60px;
    overflow:hidden;
}

.crop-landscape img {
    width: 60px;
    height:auto;
}
.crop-potrait img {
    height: 60px;
    width:auto;
}