JSFiddle - React, Tailwind, and code Playground

by deshg

HTML

<div class="container">
	BACKGROUND SVG:<br>
	<div style="background-image: url('https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg');">
	</div>
</div>

<div class="container">
	BACKGROUND IMG:<br>
	<div style="background-image: url('https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png');">
	</div>
</div>

<div class="container">
	SVG IN IMG TAG:<br>
	<img src="https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg" alt="">
</div>

<div class="container">
	IMG IN IMG TAG:<br>
	<img src="https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png" alt="">
</div>

CSS

body, html {
			height: 100%;
		}
		body {
			margin: 0;
			padding: 0;
		}
		.container {
			float: left;
			width: 25%;
			height: 100%;
		}

		.container img {
			width: 100%;
		}

		.container div {
			background-size: cover;
			width: 100%;
			padding-top: 100%;
		}