CSS aspect-ratio – das Seitenverhältnis von HTML-Elementen steuern

Web-Layouts und einzelne Komponenten ändern ihre Abmessungen i.d.R. unabhängig in Breite und Höhe. Sie skalieren – bis auf wenige Ausnahmen wie die HTML <img>- oder <video>-Elemente – nicht proportional. Das Beibehalten oder das Verändern des Seitenverhältnisses ist allerdings häufig ein Schlüsselfaktor, wenn es um Layout-Entscheidungen im responsive Design geht. Ein festes Seitenverhältnis ist mittels CSS derzeit nur mit einem Trick möglich. Das ändert sich bald mit der nativen CSS-Eigenschaft aspect-ratio.

Der padding-bottom-Trick

Die aktuell gängige Lösung für ein festes Seitenverhältnis mit CSS ist der sog. Padding-Bottom-Trick. Wir machen uns dabei zu Nutze, dass sich der padding-bottom-Wert eines <div> auf die Breite seines Elternelements bezieht. Wenn das Elternelement eine Breite von 100% hat und wir dem <div> den padding-bottom-Wert von 50% geben, ist das Seitenverhältnis über alle Display-Größen hinweg 2:1.

Damit können wir alle gewünschten Seitenverhältnisse erzeugen. Z. B. 4:3, indem wir unserem <div> ein padding-bottom-Wert von 75% geben, 16:9 mit dem Wert 56,25%, usw.

Anwendungsbeispiel

Das folgende Beispiel zeigt eine rein dekoratives Bild (background-image) über die volle Breite einer Website. Das Seitenverhältnis von 16:9 wird immer eingehalten.

Beispiel öffnen

Die oben beschriebene Technik funktioniert hier wunderbar – allerdings nur, da der <div> keinen Inhalt besitzt. Da die Höhe des Inhalts zu dem angegebenen padding-bottom hinzuaddiert würde, stimmt das Seitenverhältnis nicht mehr, sobald Inhalte im <div> vorhanden sind.

Zwar könnten wir den Inhalt absolute positionieren, damit bekommen wir durch etwaige unterschiedliche Textlängen aber schnell Probleme im Responsive Webdesign. Deshalb ist der klassische Padding-Bottom-Trick in vielen Fällen keine praktikable Lösung.

Festes Seitenverhältnis und minimale Höhe

Um das Überlaufen oder Abschneiden des Inhalts über den <div> hinaus zu vermeiden, arbeiten wir mit dem Pseudo-Element ::before (oder wahlweise auch ::after).

Im CSS sieht das dann folgendermaßen aus:

.aspect-ratio-16-9 {
  display: flow-root;
  position: relative;
}

.aspect-ratio-16-9::before {
  content: '';
  float: left;
  padding-bottom: 56.25%;
}

Der <div> bildet das Elternelement und das ::before drückt das <div>-Element auf. Dadurch erreichen wir eine Minimalhöhe, die dem angestrebten Seitenverhältnis entspricht. Sollte der Inhalt des <div>-Elements zu lang werden, wird es einfach aufgedrückt. Dadurch verhindern wir ein unschönes Überlaufen oder Abschneiden des Inhalts.

Das ::before-Element selbst ist nicht sichtbar, da content leer ist und es keine Breite hat.

Für den Support älterer Browser kann display: flow-root auch gegen display: table, display: inline-block oder display: flex getauscht werden.

Anwendungsbeispiel

Das folgende Beispiel zeigt den Kopfbereich einer Website mit einem Hintergrund-Bild im Seitenverhältnis 16:9.

Beispiel öffnen

Die CSS-Eigenschaft aspect-ratio

In Zukunft werden wir auf die oben beschriebenen Tricks verzichten können und einfach auf die native CSS-Eigenschaft aspect-ratio zurückgreifen.

Mit der CSS-Eigenschaft aspect-ratio wird ein bevorzugtes Seitenverhältnis für eine Box einfach festgelegt.

div {
  aspect-ratio: {Breite} / {Höhe};
}

Um ein quadratisches Seitenverhältnis zu erzeugen, sieht das CSS beispielsweise wie folgt aus:

div {
  aspect-ratio: 1 / 1;
}

Zur Verfügung steht außerdem der Wert auto, bei dem das Seitenverhältnis mit den Abmessungen der »Content Box« arbeitet sowie die globalen Werte inherit, initial und unset.

Den aktuellen Browsersupport für aspect-ratio könnt ihr hier einsehen.