CSS/Eigenschaften/aspect-ratio
Aus SELFHTML-Wiki
< CSS | Eigenschaften(Weitergeleitet von Aspect-ratio)
Details: caniuse.com
erlaubte Werte |
|
---|---|
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;
}
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)
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)