JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<style>
		.image {
			display: inline-block;
			margin: 4px;
			border: 1px solid #CCCCCC;
			background-position: center center;
			background-repeat: no-repeat;
		}
		.image.size-fixed {
			width: 200px;
			height: 200px;
		}
		.image.size-fluid {
			padding-top: 15%;
			width: 20%;
		}
		.image.scale-fit {
			background-size: contain;
		}
		.image.scale-fill {
			background-size: cover;
		}
		.image img {
			display: none;
		}
	</style>

	<!--p>Fixed Size Container, Scaled to Fit Images</p>
	<div class="image size-fixed scale-fit" style="background-image: url(//placehold.it/400x400);"><img src="//placehold.it/400x400" alt="Orientation: Square" width="400" height="400"></div>
	<div class="image size-fixed scale-fit" style="background-image: url(//placehold.it/300x400);"><img src="//placehold.it/300x400" alt="Orientation: Landscape" width="400" height="300"></div>
	<div class="image size-fixed scale-fit" style="background-image: url(//placehold.it/400x300);"><img src="//placehold.it/400x300" alt="Orientation: Portrait" width="300" height="400"></div>
	<p>Fixed Size Container, Cropped to Fit Images</p>
	<div class="image size-fixed scale-fill" style="background-image: url(//placehold.it/400x400;"><img src="//placehold.it/400x400" alt="Orientation: Square" width="400" height="400"></div>
	<div class="image size-fixed scale-fill" style="background-image: url(//placehold.it/300x400);"><img src="//placehold.it/300x400" alt="Orientation: Landscape" width="400" height="300"></div>
	<div class="image size-fixed scale-fill" style="background-image: url(//placehold.it/400x300);"><img src="//placehold.it/400x300" alt="Orientation: Portrait" width="300" height="400"></div>
	<p>Fluid Size Container, Scaled to Fit Images</p>
	<div class="image size-fluid scale-fit" style="background-image: url(//placehold.it/400x400);"><img src="//placehold.it/400x400" alt="Orientation: Square" width="400" height="400"></div>
	<div class="image size-fluid scale-fit" style="background-image:...