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

Von: Jonas, Felix

Ein festes Seitenverhältnis von Bildern oder Objekten kann mit der CSS-Eigenschaft »aspect-ratio« erzwungen werden. In der Vergangenheit musste man sich dazu einiger Tricks bedienen.

Aktualisiert von 2020 – 2023

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. Der Umgang mit Bildern und Grafiken im RWD kann mit verlässlich steuerbaren Seitenverhältnissen deutlich vereinfacht werden.

Die CSS-Eigenschaft aspect-ratio

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.

Der padding-bottom-Trick

Ein alternativer Ansatz 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.

Das Abschneiden von Inhalten vermeiden

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

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer von kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Mastodon, LinkedIn, Xing und YouTube.

Felix Lehmann

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.