JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
What I reached for is puting the image within the div
And make the div overflow hidden
And the image is max-width 100% and auto height
-->

<div id="foo">
    <img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" />
</div>


<!-- 
An example of background size cover
But the problem I can't save the image
 -->

<div id="cover" style="background-image:url(http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg)"> </div>

CSS

#foo,#cover{
    width: 300px;
    height: 300px;
    overflow: hidden;
    background: #ccc;
    display:inline-block;
    vertical-align: top;
}

img{
    max-width: 100%;
    height: auto;
}

#cover{
    background-size:cover;
    background-position:50% 50%;
}