CSS/Eigenschaften/aspect-ratio

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Die Eigenschaft aspect-ratio legt ein bevorzugtes festes Seitenverhältnis fest.
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Leer

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 (Unterschied Tag Element Attribut)
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

Siehe auch