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><br/>
	<div class="image size-fluid scale-fill" style="background-image: url(//placehold.it/200x400);"></div><br/>
	<div class="image size-fluid scale-fill" style="background-image: url(//placehold.it/400x200);"></div>