CSS/Eigenschaften/aspect-ratio

Der Begriff aspect-ratio ist mehrdeutig.
Daneben gibt es noch das Medienmerkmal aspect-ratio.

Die Eigenschaft aspect-ratio legt ein bevorzugtes festes Seitenverhältnis fest.

Erlaubte Werte

auto, Angabe gilt nur für ersetzte Elemente wie Bilder, deren Größe übernommen wird.
Ein Verhältniswert, als Angabe für Verhältnis von Breite / Höhe, zum Beispiel 16 / 9

Vererbung steuernde Werte inherit, initial, unset und revert

Defaultwert

auto

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

.quadrat {
   aspect-ratio: 1 / 1;
}
.movie-card {
  width: 50%;
  aspect-ratio: 16 / 9;
}

.movie-card2 {
  width: 150px;
  height: 150px;
  aspect-ratio: 16 / 9;
}

Das Element mit der Klasse .quadrat erhält feste Abmessungen, damit die Höhe genau der Breite entspricht.
.movie-card erhält ein festes Seitenverhältnis von 16:9, während .movie-card2 durch die Angabe der Breite und Höhe die Angabe von aspect-ratio ignoriert. (siehe Link css-tricks)

Beachten Sie: Mit dem Padding-bottom height fix können nur leere div-Elemente erzeugt werden, die ein Hintergrundbild, aber keinen Inhalt haben dürfen.

Siehe auch

• CSS/Media Queries/Medienmerkmale#aspect-ratio (CSS Medien-Merkmal)

Weblinks

• Spezifikation (W3C): css-sizing-4 aspect-ratio
• MDN: aspect-ratio
• css-tricks: “Weak declaration” Chris Coyier Jun 23, 2021
• Details: caniuse.com