JSFiddle - React, Tailwind, and code Playground

by Niranjan Borawake

HTML

Orginal :
<br>
<img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="200" height="140" />
<br>
Clipped : 
<br>
<div class="wrapper">
    <div class="imgContainer">
        <!-- NOTE: image dimensions are same as in "wrapper" class-->
        <img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="200" height="140" />
    </div>
</div>

CSS

.wrapper{
    width : 200px;
    height : 140px;
}
/* Below width and height are in percentage w.r.t. those in 'wrapper' class whose width and height are same as image.
*/
.imgContainer{
    width : 50%;
    height : 50%;
    overflow : hidden;
}