Poměr stran

aspect-ratio

• Dokumentace na MDN.

• aspect-ratio: 16 / 9 nastaví prvku poměr stran 16 ku 9, častý poměr širokoúhlých videí.

• Pozor na podporu. Safari umí novou vlastnost až od verze 15. Více na Can I use.

<div class="video-1"></div>

.video-1 {
	box-shadow: inset 0 0 20px red;
	aspect-ratio: 16 / 9;
}

::before a padding-top

• Složitější, ale funguje i na starších prohlížečích.

<div class="video-2"></div>

.video-2 {
	box-shadow: inset 0 0 20px blue;
}
.video-2::before {
	content: '';
	display: block;
	padding-top: calc(100% / (16 / 9));
}

• Vnitřek je celý zabraný paddingem. Další obsah je tedy vhodné absolutně napozicovat.

<div class="video-3">
	<div class="video-3__obsah">Tady bude přehrávač videa.</div>
</div>

.video-3 {
	position: relative;
	box-shadow: inset 0 0 20px magenta;
}
.video-3::before {
	content: '';
	display: block;
	padding-top: calc(100% / (16 / 9));
}
.video-3__obsah {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}