JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
	<img id="src" src="https://i.imgur.com/6672G7J.png" />
	<div id="bgwrapper">
    <div id="bg"></div>
  </div>
</div>

CSS

#wrap
{
    width:100%;
    height:300px;
}

#src
{
	display:inline-block;
	width:auto;
	height:100%;
	border:1px #0f0 solid;
}

#bgwrapper {
  width: 100px;
	display:inline-block;
}
    
#bg
{
	display:inline-block;
	background-image:url(https://i.imgur.com/6672G7J.png);
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:0;
  padding-top: 100%; /* Ratio of Height / Width */
	border:1px #f00 solid;
}