CSS/Eigenschaften/aspect-ratio

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

Browserunterstützung
caniuse.com

Die Eigenschaft aspect-ratio legt ein bevorzugtes festes Seitenverhältnis fest. So können Sie Boxen erstellen, die proportionale Abmessungen beibehalten, selbst wenn sie wachsen oder schrumpfen.

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
• auto b/h, das angegebene Verhältnis wird verwendet, es sei denn, das Element ist ein ersetztes Element mit einem natürlichen Seitenverhältnis (wie zum Beispiel ein .jpg oder .png Bild). In diesem Fall wird das natürliche Seitenverhältnis verwendet.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

.quadrat {
   aspect-ratio: 1;   /*Kurzform von 1 / 1 - auch eine Dezimalzahl ist erlaubt! */
}
.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/Tutorials/Boxmodell
  • Größenangaben aspect-ratio
  • Padding-bottom height fix
• CSS/Tutorials/Grid
  • Bilderwand aus Quadraten
• 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