Besuchen Sie unseren Adventskalender 2022!

CSS/Eigenschaften/aspect-ratio

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Aspect-ratio)
Wechseln zu: Navigation, Suche

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

Weblinks