aspect-ratio

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.

Steckbrief aspect-ratio

Syntax: aspect-ratio: auto | <ratio>
Initialwert: auto
Vererbt: Nein
Animierbar: Ja

Kategorie: Responsive Design
Werte: 4
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

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

4 Werte

Wert	Beschreibung	Beispiel
`auto`	Kein festes Seitenverhältnis. Bei Replaced Elements (img, video) wird das intrinsische Verhältnis verwendet. (Standard)	aspect-ratio: auto;
`Breite / Höhe`	Festes Seitenverhältnis als Bruch. Die Schreibweise mit Leerzeichen und Schrägstrich.	aspect-ratio: 16 / 9;
`Zahl (Kurzform)`	Einzelne Zahl wird als Verhältnis zu 1 interpretiert. 2 bedeutet 2 / 1.	aspect-ratio: 2;
`auto Breite / Höhe`	Nutzt das intrinsische Verhältnis, fällt auf den angegebenen Wert zurück. Ideal für Bilder gegen CLS.	aspect-ratio: auto 16 / 9;

Beispiele

5 Beispiele

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

Gängige Seitenverhältnisse

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

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.

Responsive Video-Container

/* 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>

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

Quadratisches Karten-Grid

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

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

CLS-freie Bilder

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"
/>

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

Skeleton-Loader

.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

5 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett

Seit Version 15.0
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

Grundlegend unterstützt
Gmail

Keine

Kein Support
Outlook

Keine

Kein Support
Yahoo Mail

Keine

Kein Support
Thunderbird

Teilweise

Grundlegend unterstützt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da