CSS aspect-ratio – Seitenverhältnis

CSS aspect-ratio, Seitenverhältnis

aspect-ratio oder Seitenverhältnis beschreibt das Verhältnis der Seiten eines Rechtecks als Breite zu Höhe. Ein Quadrat hätte in dieser Notation ein Seitenverhältnis oder Aspect Ratio von 1:1, beim Film kennen wir das Seitenverhältnis 16:9.

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Seitenverhältnis von video, iframe, canvas

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

Monacco-480-360
Seitenverhältnis 4:3 – 480px x 360px
Monacco-480-320
Seitenverhältnis 3:2 – 480px x 320px
Monacco-480-270
Seitenverhältnis 16:9 – 480px x 270px

Unterschiedliche Größen, aber dasselbe Seitenverhältnis

Monacco-4-3-480
Seitenverhältnis 4:3 – 480px x 360px
Monacco-4-3-427
Seitenverhältnis 4:3– 427px x 320px
Monacco-4-3-360
Seitenverhältnis 4:3– 360px x 270px

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 {
		-webkit-aspect-ratio: 4/3;
		aspect-ratio: 4/3;
		background:green
	}
}

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