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.

Details: caniuse.com

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
Browsersupport	Details: caniuse.com
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.

Weblinks

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

Siehe auch

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