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

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: