Besuchen Sie unseren Adventskalender 2022!
CSS/Eigenschaften/aspect-ratio
Aus SELFHTML-Wiki
< CSS | Eigenschaften
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 vonBreite / Höhe
, zum Beispiel 16 / 9- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- 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;
}
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
Liste der CSS-Eigenschaften
- Größenangaben
- Abstände
- Benutzeroberfläche
- generierter Inhalt
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Positionierung und Anzeige
- Rahmen und Schatten
- Schriftformatierung
- Textausrichtung
- Animationen
.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 vonaspect-ratio
ignoriert. (siehe Link css-tricks)