JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<style>
		.image {
			display: inline-block;
			margin: 4px;
			background-position: center center;
			background-repeat: no-repeat;
		}
		.image.size-fluid {
			padding-top: 15%;
			width: 20%;
		}
		.image.scale-fill {
			background-size: cover;
		}
		.image img {
			display: none;
		}
	</style>

	<p>Fluid Size Container, Cropped to Fit ImagesX</p>
	<div class="image size-fluid scale-fill" style="background-image: url(//placehold.it/400x400);"><img width="400" height="400"></div><br/>
	<div class="image size-fluid scale-fill" style="background-image: url(//placehold.it/300x400);"><img src="//placehold.it/300x400" alt="Orientation: Landscape" width="400" height="300"></div><br/>
	<div class="image size-fluid scale-fill" style="background-image: url(//placehold.it/400x900);"></div>