css - aspect-ratio

by prince bazawule

HTML

<div>
	<p>16:9 Aspect Ratio</p>
	<img src="https://picsum.photos/id/237/200/300" alt="placeholder image"/>
</div>

SCSS

// variables

// colors
$lightgrey: rgba(238, 241, 243, 1);
$black: rgba(48, 69, 92, 0.8);

// fonts
$sans: 'Ubuntu', sans-serif;

// document styles
body {
	position: relative;
	width: 90%;
	height: 100%;
	background: $lightgrey;
	font-family: $sans;
	font-weight: 300;
	color: $black;
	margin: 5% auto;
	
	img {
		aspect-ratio: 16 / 9; /* aspect ratio */
		width: 50%;
		object-fit: cover;
	}
}