Responsive Aspect Ratio

Ich glaube jeder Web-Entwickler musste im Laufe seines Lebens schon einmal ein Objekt in ein festgelegtes Seitenverhältnis zwingen – über alle Breakpoints hinweg. Sei es ein 16:9 Video, ein 4:3 Bild oder etwas ganz anderes. Dabei sind wir dann sicher auch alle schon auf den padding-top Hack gestoßen mit den berühmten 56.25% für eine 16:9 Aspect Ratio (9 / 16 = 0.5625). Das erforderte aber einen absolut positionierten Content-Bereich, dann gab's Probleme wenn man es nicht mit einem Pseudo-Element umgesetzt hat, und und und. Also habe ich mir eine eigene Lösung ausgedacht mit ein bisschen JS und einer CSS-Variable.

function iframcalc() {
	let root = document.documentElement;
	let container = document.querySelector('.content');
	root.style.setProperty('--cw', container.getBoundingClientRect().width + 'px');
}

// Hier empfielt es sich noch einen Throttle einzubauen
window.addEventListener('resize',function() { iframcalc(); });

.video__parent {
	width: 100%;
	height: calc(var(--cw) / (4 / 3));
	height: calc(var(--cw) / (16 / 9));
	height: calc(var(--cw) / (21 / 9));
	height: calc(var(--cw) / (16 / 10));
}

.video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

Das ganze funktioniert wie folgt: via JS wird die Größe des Content-Containers bestimmt (sagen wir mal 1024px) und in einer CSS Variablen --cw gespeichert. Unter Zuhilfenahme der CSS Variable wird nun die nötige Höhe für das gewünschte Seitenverhältnis berechnet. Die Vorteile dieser Variante: es werden keine absoluten Content- oder Pseudo-Elemente mehr benötigt, neue Aspect Ratios sind einfach und ohne große Berechnungen implementierbar und läuft ein Element responsive, zum Beispiel über eine nur noch 50% breite Column, teilt man einfach die CSS-Variable durch die entsprechende Zahl.

PS: Danke Google, dass ca. einen Tag nach meiner Implementierung die Aspect-Ratio Spec in Chrome Canary gelandet ist …

.video__parent {
	aspect-ratio: 16 / 9;
}