CSS aspect ratio – Seitenverhältnis

Seitenverhältnis von video, iframe, canvas

CSS aspect-ratio ist grundsätzlich für alle HTML-Elemente verfügbar, wird aber insbesondere dann wirksam, wenn das Element als Block-, Flex- oder Grid-Container dargestellt wird – also wenn es eine definierte Box-Größe hat. Bei ersetzte Elemente (replaced Elements) wie <img>, <video>, <canvas> hilft aspect-ratio, das Layout zu kontrollieren, wenn z. B. keine expliziten Breiten- oder Höhenwerte angegeben sind.

Ersetzte Elemente 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
	}
}