<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

body {
	min-height: 100vh;
	margin: 0;
	padding: 24px;
	gap: 24px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
}

.box {
	position: relative;
	padding-bottom: calc((var(--aspect-y, 9) / var(--aspect-x, 16)) * 100%);
	background: #4169e1;
}

.box::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	font: 24px Consolas, monospace;
	color: #ffffff;
 	counter-reset: aspect-x var(--aspect-x) aspect-y var(--aspect-y);
	content: counter(aspect-x) ' × ' counter(aspect-y);
	overflow: hidden;
}

.box:nth-child(1) {
	--aspect-x: 16;
	--aspect-y: 9;
}

.box:nth-child(2) {
	--aspect-x: 16;
	--aspect-y: 10;
}

.box:nth-child(3) {
	--aspect-x: 4;
	--aspect-y: 3;
}