CodePen Home fixed aspect-ratio box with container queries

by Jordan Sayner

HTML

<div class='parent'>
  <div class='aspect-ratio-child'></div>
</div>

CSS

.parent {
	display: grid;
	container-type: size;
	width: min(60em, 90%);
	height: min(800px, 50vh);
	background: dodgerblue
}

.aspect-ratio-child {
	--r: 8/ 5;
	place-self: center;
	width: min(100cqw, var(--r)*100cqh);
	height: min(100cqh, 100cqw/(var(--r)));
	background: crimson
}