CSS aspect-ratio – Seitenverhältnis

CSS aspect-ratio

aspect-ratio oder das 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

Video, Fotos und sonstige HTML-Boxen

Die CSS-Eigenschaft 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.

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

Gleiche Breite, aber mit unterschiedlichen Seitenverhältnissen

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

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 das 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 haben iframe-Element kein festes Seitenverhältnis, denn sie betten Webseiten ein.

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

IE11 ist aus dem Rennen. Der letzte Browser, der aspect-ratio nicht unterstützt, ist Safari bis einschließlich Version 14. Erst ab Version 15 unterstützt auch Safari aspect-ratio.

@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
	}
}