aspect-ratio

Zuletzt aktualisiert am 15. Februar 2026

aspect-ratio definiert ein bevorzugtes Seitenverhältnis für ein Element. Statt den alten padding-top-Hack zu verwenden, gibst du einfach das Verhältnis an: 16 / 9 für Videos, 1 / 1 für Quadrate, 4 / 3 für klassische Fotos. Der Browser berechnet automatisch die fehlende Dimension. Das reduziert Layout Shifts (CLS) und macht responsive Layouts deutlich einfacher.

Grundlagen

aspect-ratio setzt ein bevorzugtes Seitenverhältnis. Wenn du nur die Breite setzt, berechnet der Browser die Höhe automatisch (und umgekehrt). Das Verhältnis wird als Bruch geschrieben: 16 / 9 bedeutet “16 Einheiten breit zu 9 Einheiten hoch”.

Wichtig: aspect-ratio definiert ein bevorzugtes Verhältnis. Wenn sowohl width als auch height explizit gesetzt sind, wird aspect-ratio ignoriert. Wenn nur eine Dimension gesetzt ist, wird die andere berechnet. Ohne explizite Dimensionen nimmt das Element die volle verfügbare Breite und berechnet die Höhe.

Der Wert auto für <img>-Tags bedeutet, dass der Browser das intrinsische Seitenverhältnis des Bildes verwendet (das aus den width- und height-Attributen im HTML). Die Kombination auto 16 / 9 nutzt das intrinsische Verhältnis, fällt aber auf 16 / 9 zurück, wenn das Bild noch lädt. Das ist perfekt gegen Layout Shifts.

Syntax & Werte

Beispiele

Gängige Seitenverhältnisse

Die wichtigsten Seitenverhältnisse im Überblick: von Ultrawide bis quadratisch.

.video     { aspect-ratio: 16 / 9; }  /* YouTube, TV */
.photo     { aspect-ratio: 3 / 2; }   /* DSLR-Fotos */
.classic   { aspect-ratio: 4 / 3; }   /* Alte Monitore */
.square    { aspect-ratio: 1 / 1; }   /* Instagram */
.ultrawide { aspect-ratio: 21 / 9; }  /* Kinoformat */

<div class="ar-showcase">
<div class="ar-box ar-21-9">21:9<br/>Ultrawide</div>
<div class="ar-box ar-16-9">16:9<br/>Video</div>
<div class="ar-box ar-3-2">3:2<br/>Foto</div>
<div class="ar-box ar-4-3">4:3<br/>Klassisch</div>
<div class="ar-box ar-1-1">1:1<br/>Quadrat</div>
</div>

Responsive Video-Container

aspect-ratio ersetzt den alten padding-top-Hack für responsive Video-Einbettungen. Statt padding-top: 56.25% schreibst du einfach aspect-ratio: 16 / 9.

/* Alt: padding-top-Hack */
.video-old {
  position: relative;
  padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}

/* Neu: aspect-ratio */
.video-new {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-new iframe {
  width: 100%;
  height: 100%;
}

<div class="video-demo">
<div class="video-container"></div>
<div class="video-label">16:9 Video-Container, passt sich der Breite an</div>
</div>

Quadratische Karten mit Grid

aspect-ratio: 1 / 1 kombiniert mit object-fit: cover erzeugt ein gleichmäßiges Grid aus quadratischen Karten.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.card {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="sq-grid">
<div class="sq-card sq-1">Card 1</div>
<div class="sq-card sq-2">Card 2</div>
<div class="sq-card sq-3">Card 3</div>
<div class="sq-card sq-4">Card 4</div>
<div class="sq-card sq-5">Card 5</div>
<div class="sq-card sq-6">Card 6</div>
</div>

Bilder gegen CLS (Cumulative Layout Shift)

aspect-ratio mit width und height Attributen verhindert Layout Shifts beim Laden von Bildern.

img {
  width: 100%;
  height: auto;
  /* Nutzt intrinsisches Verhältnis,
     Fallback auf 16/9 während Laden */
  aspect-ratio: auto 16 / 9;
}

<!-- width + height im HTML setzen! -->
<img
  src="foto.jpg"
  width="800"
  height="450"
  alt="Beschreibung"
/>

Skeleton-Loader mit aspect-ratio

Ein Placeholder mit aspect-ratio und Ladeanimation reserviert genau den richtigen Platz.

.skeleton {
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

<div class="skeleton-demo">
<div class="skeleton sk-video"></div>
<div class="skeleton sk-square"></div>
<div class="skeleton sk-photo"></div>
</div>

Barrierefreiheit

aspect-ratio hilft bei der Barrierefreiheit, weil es Cumulative Layout Shift (CLS) reduziert. Layout Shifts können für Screenreader-Nutzer verwirrend sein, wenn sich der Lesefluss plötzlich ändert. Setze width und height Attribute im HTML zusammen mit aspect-ratio im CSS, damit der Browser den Platz sofort reserviert.

Vorsicht bei Containern mit Text-Inhalt und aspect-ratio: Wenn der Text den verfügbaren Platz überschreitet, kann er abgeschnitten werden. Nutze overflow: auto als Sicherheitsnetz für solche Fälle.

Häufige Fehler

• 16:9 statt 16 / 9 schreiben. CSS verwendet einen Schrägstrich mit Leerzeichen, keinen Doppelpunkt. aspect-ratio: 16:9 ist ungültig.
• width und height gleichzeitig setzen und erwarten, dass aspect-ratio greift. Wenn beide Dimensionen explizit gesetzt sind, wird aspect-ratio ignoriert. Setze nur eine Dimension und lass den Browser die andere berechnen.
• aspect-ratio auf einen Text-Container anwenden. Bei dynamischem Text-Inhalt kann der Text über den Container hinauswachsen. aspect-ratio ist primär für Medien-Container gedacht.
• Den alten padding-top-Trick weiter verwenden. aspect-ratio ist einfacher, lesbarer und performanter. Der padding-Hack braucht position: relative auf dem Eltern und position: absolute auf dem Kind.
• Den auto-Fallback (auto 16 / 9) nicht kennen. Für Bilder ist diese Kombination ideal: Sie nutzt das echte Seitenverhältnis des Bildes, zeigt aber sofort den richtigen Platzhalter, bevor das Bild geladen ist.

Browser-Kompatibilität

aspect-ratio wird von allen modernen Browsern unterstützt. Safari unterstützt es seit Version 15.0.

Email-Kompatibilität

aspect-ratio wird in den meisten E-Mail-Clients nicht unterstützt. Verwende für E-Mails feste Breiten und Höhen.

Verwandte Eigenschaften