Easily preserve any aspect ratio with pure CSS

Thanks to custom properties a.k.a. CSS variables, we can automate aspect ratio preservation without the need for utility classes.

/* Pure CSS */
[style*="--aspect-ratio"] > :first-child {
	width: 100%;
}

[style*="--aspect-ratio"] > img {  
	height: auto;
}

@supports (--custom:property) {
	[style*="--aspect-ratio"] {
		position: relative;
	}

	[style*="--aspect-ratio"]::before {
		content: "";
		display: block;
		padding-bottom: calc(100% / (var(--aspect-ratio)));
	}  

	[style*="--aspect-ratio"] > :first-child {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}  
}

// SCSS + Tailwind (fristys.me uses this exact code)
[style*='--aspect-ratio'] {
	@apply relative;

	&::before {
		@apply block;
		content: '';
		padding-bottom: calc(100% / (var(--aspect-ratio)));
	}

	& > :first-child {
		@apply w-full h-full absolute top-0 left-0;
	}

	& > img {
		@apply h-auto;
	}
}

<div style="--aspect-ratio:5/7;">
  <!-- Whatever's here will appear in 5/7 -->
</div>

<div style="--aspect-ratio:16/9;">
  <!-- Whatever's here will appear in 16/9 -->
</div>

<div style="--aspect-ratio:1;">
  <!-- Whatever's here will appear in a square ratio -->
</div>