CSS aspect-ratio – das Seitenverhältnis von HTML-Elementen steuern
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.

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