CSS aspect ratio – Seitenverhältnis

Seitenverhältnis von video, iframe, canvas

In Webseiten brauchen wir das Seitenverhältnis in erster Linie, um iframe-Elemente für Video so anzulegen, dass sie auf kleinen und großen Monitoren das Video unverzerrt wiedergeben.

aspect-ratio wendet sich an ersetzte Elemente (replaced Elements) – das sind Elemente, die etwas in das Dokument importieren und deren Darstellung nicht in den Händen des Dokuments selber liegt. iframe-Elemente als vordergründiges Beispiel bringen ihr eigenes CSS mit und ihre Abmessungen können nicht immer vorausgesagt werden.

Neben iframes zählen video, embed und img als »Replaced Elements«, die nicht dem eigenen CSS unterliegen. Sie haben meist immanente Abmessungen (Default: iframe, video, canvas 300 x 150 Pixel).

Gleiche Breite, aber mit unterschiedlichen Seitenverhältnissen

Unterschiedliche Größen, aber dasselbe Seitenverhältnis

Seitenverhältnis erhalten mit padding-top

Das iframe-Element stammt aus der Ära vor den mobilen Geräte, als CSS sich in erster Linie nur um Farben und Schriftbild kümmerte. Heute ist es das Video in einem iframe, dass CSS zu schaffen macht, und nur durch ein eigenwilliges Verhalten der CSS-Eigenschaft padding sowie einer abenteuerlichen Konstruktion von absoluter und relativer Positionierung dem Video in einem iframe ein responsives Auftreten im richtigen Seitenverhältnis verschafft.

.container {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
}

.container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Der iframe-Element mit dem Video braucht einen relativ positionierten Container und muss selber absolut positioniert sein. padding-top: 56.25% ist der Trick, der für das richtige Seitenverhältnis bei einem Video mit einem Seitenverhältnis von 16:9 sorgt.

Browser-Support für aspect-ratio

aspect ratio ist eine relativ junge CSS-Eigenschaft, die jetzt ihren Weg in die Browser findet und dem verworrenen (wenn auch wirksamen) Hack ersetzen wird. Anders als HTML-img-Elemente hat ein iframe kein festes Seitenverhältnis, denn es bettet externe Dokumente ein.

<iframe width="854" height="480" 
		src="video-iframe.html" 
		style="width: 100%; aspect-ratio: 854/480;">
</iframe>

IE11 ist aus dem Rennen (sag ich jetzt mal so …). Seit Version 15 unterstützt Safari als Letzter der Gerechten endlich aspect-ratio. Die supports-Regel kann vorsichtshalber die Browser-Unterstützung prüfen.

@supports (aspect-ratio: 4/3) {
	.ratiobox {
		aspect-ratio: 4/3;
		background:green
	}
}

@supports not (aspect-ratio: 4/3) {
	.ratiobox {
		width:300px;
		height: calc(300px * 300/400);
		background:firebrick
	}
}