Wie das CSS-Seitenverhältnis funktioniert

Sie haben width: 100% für einen Bild-Container gesetzt, aber die Höhe kollabiert auf null, bis das Bild geladen ist – was zu jener störenden Layout-Verschiebung führt, die Benutzer hassen. Die CSS-Eigenschaft aspect-ratio löst dieses Problem direkt, indem sie es Ihnen ermöglicht, Platz für Inhalte zu reservieren, bevor diese eintreffen.

Dieser Artikel erklärt, wie die aspect-ratio-Eigenschaft an CSS-Größenberechnungen teilnimmt, wie sie sich zwischen ersetzten und nicht-ersetzten Elementen unterscheidet und warum sie die alte Padding-Hack-Technik für responsive Layouts ersetzt.

Die CSS-Eigenschaft Aspect-Ratio verstehen

Die aspect-ratio-Eigenschaft definiert ein bevorzugtes Breite-zu-Höhe-Verhältnis für die Box eines Elements. Das Schlüsselwort ist „bevorzugt” – sie greift nur dann, wenn mindestens eine Dimension automatisch ist.

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Hier ist die Breite explizit (100% des Elternelements), sodass der Browser die Höhe automatisch anhand des 16:9-Verhältnisses berechnet. Wenn Sie sowohl width als auch height explizit setzen, beeinflusst aspect-ratio typischerweise nicht die verwendete Größe, da definitive Dimensionen in normalen Layout-Berechnungen Vorrang haben.

Syntax und Werte

Die Eigenschaft akzeptiert drei Formen:

aspect-ratio: 16 / 9;      /* Breite / Höhe Verhältnis */
aspect-ratio: 1;            /* entspricht 1 / 1 (Quadrat) */
aspect-ratio: auto 3 / 2;  /* auto mit Fallback-Verhältnis */

Das Schlüsselwort auto weist den Browser an, das natürliche Seitenverhältnis des Elements zu verwenden, falls eines existiert. Die Kombination auto 3 / 2 bedeutet: Verwende das natürliche Verhältnis für ersetzte Elemente, andernfalls verwende 3/2.

Ersetzte vs. nicht-ersetzte Elemente

Die Eigenschaft verhält sich je nach Elementtyp unterschiedlich.

Ersetzte Elemente (<img>, <video>, <iframe>) haben intrinsische Dimensionen. Standardmäßig verwendet aspect-ratio: auto ihr natürliches Verhältnis. Wenn Sie aspect-ratio: auto 16/9 angeben, verwendet der Browser das natürliche Verhältnis der Medien, sobald diese geladen sind, reserviert aber vorab Platz mit 16/9 – was Layout-Verschiebungen verhindert.

Nicht-ersetzte Elemente (<div>, <section>) haben kein intrinsisches Verhältnis. Wenn Sie aspect-ratio: 1 auf ein <div> mit width: 200px setzen, entsteht ein 200×200-Quadrat. Die Eigenschaft steuert direkt die Box-Dimensionen.

Aspect-Ratio formt die Box, nicht die Medien

Eine wichtige Unterscheidung: aspect-ratio steuert die Dimensionen des Containers, nicht wie Medien diesen ausfüllen. Verwenden Sie für Bilder oder Videos object-fit, um das Medienverhalten innerhalb der Box zu steuern:

.thumbnail {
  aspect-ratio: 1;
  object-fit: cover;
}

Dies erzeugt einen quadratischen Container, in dem das Bild den Bereich abdeckt und bei Bedarf zugeschnitten wird.

CSS Aspect Ratio vs. der Padding-Hack

Bevor aspect-ratio Browser-Unterstützung hatte, verwendeten Entwickler den padding-bottom-Prozentsatz-Trick:

/* Veralteter Padding-Hack */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 0,5625 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Dies funktioniert, weil Padding-Prozentsätze gegen die Breite des Elternelements berechnet werden und so eine verhältnisbasierte Höhe erzeugen. Es erfordert jedoch Wrapper-Elemente, absolute Positionierung und obskure Mathematik.

Der moderne Ansatz ist sauberer:

.video-wrapper {
  aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

Verwenden Sie aspect-ratio als Standard. Reservieren Sie den Padding-Hack nur, wenn Sie Legacy-Browser wie IE unterstützen müssen.

Aspect-Ratio in Flexbox und Grid

Die Verwendung von aspect-ratio in Flexbox- und Grid-Layouts funktioniert, aber Auto-Sizing-Interaktionen können unerwartete Ergebnisse liefern.

In CSS Grid funktioniert aspect-ratio natürlich mit automatisch dimensionierten Tracks:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.grid-item {
  aspect-ratio: 1;
}

Jedes Element wird quadratisch, wobei die Höhe seiner durch das Grid bestimmten Breite entspricht.

In Flexbox sollten Sie beachten, dass flex-grow und flex-shrink die berechnete Breite beeinflussen, die dann die Höhe über aspect-ratio bestimmt. Wenn sich Elemente unerwartet dehnen, überprüfen Sie Ihre Flex-Eigenschaften. Das Setzen einer expliziten width oder flex-basis auf dem Element gibt aspect-ratio eine stabile Dimension, von der aus gearbeitet werden kann.

Für beide Layout-Systeme setzen Sie min-height: 0 auf Elemente, wenn Inhalte die durch aspect-ratio eingeschränkte Höhe überlaufen.

Praktische responsive Layouts mit Aspect-Ratio

Hier ist ein gängiges Muster für responsive Card-Bilder:

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

Und für eingebettete Videos:

.embed-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

Beide Muster reservieren sofort Layout-Platz und eliminieren kumulative Layout-Verschiebungen (CLS).

Fazit

Die aspect-ratio-Eigenschaft definiert ein bevorzugtes Verhältnis, das verwendet wird, wenn mindestens eine Dimension auf auto gesetzt ist. Sie formt die Box des Elements – nicht den Medieninhalt – und ersetzt die Padding-Hack-Technik für moderne Browser. Bei der Arbeit mit Bildern oder Videos kombinieren Sie sie mit object-fit, um zu steuern, wie Medien den Raum ausfüllen. In Flexbox- und Grid-Kontexten achten Sie auf Auto-Sizing-Interaktionen, die die berechneten Dimensionen beeinflussen können.

Häufig gestellte Fragen

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.