JSFiddle - React, Tailwind, and code Playground

HTML

<main>
<div class="small"><img src="http://www.nasa.gov/sites/default/files/images/729223main_728322main_messenger_orbit_image20130218_2_full_full_full.jpg" alt=""/>	</div>
</main>

CSS

main{
	position: relative;
 	width: 100%;
 	height: 100%;
 	z-index: 1;
 	overflow: hidden;
}
.small{
	float:left;
	width: 	447px;
	background-color: blue;
	max-width:40%;
	max-height:40%;
	
}
.small:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.small img{
	max-width:100%;
	max-height:100%;
	position:relative;
  display: block;
}