Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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. 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 Felix Lehmann

Benutzerbild

Als Web-Designer und Frontend-Developer bei kulturbanause umfasst Felix Hauptaufgabenbereich die Konzeption, Gestaltung und Umsetzung von Designsystemen. Scribble auf Papier, Prototyping im Design-Tool, schnellstmöglich in den Browser und mit CSS umsetzen. Auch das Überführen in ein Custom WordPress-Theme ist kein Problem. Die meiste Zeit verbringt er trotzdem damit die richtigen Klassennamen zu finden.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →