<ratio>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Der <ratio>
CSS Datentyp beschreibt das proportionale Verhältnis zwischen zwei Werten. Er repräsentiert hauptsächlich das Seitenverhältnis, welches die Breite zur Höhe in Beziehung setzt. Zum Beispiel wird der <ratio>
als Wert für die aspect-ratio
Medienfunktion in @media
Media-Queries, als aspect-ratio
Größenfunktion in @container
Container-Queries und als Wert für die CSS aspect-ratio
Eigenschaft verwendet.
Syntax
Der <ratio>
-Datentyp besteht aus einem <number>
, gefolgt von einem Schrägstrich ('/', Unicode U+002F SOLIDUS
) und einem zweiten <number>
. Beide Zahlen müssen positiv sein. Leerzeichen vor und nach dem Schrägstrich sind optional. Die erste Zahl repräsentiert die Breite, während die zweite die Höhe darstellt. Zusätzlich ist auch ein einzelner <number>
als Wert zulässig.
Zwei Verhältnisse werden durch Vergleichen der Quotienten ihrer numerischen Werte verglichen. Zum Beispiel ist 16/16 kleiner als 16/9, weil es zu 1 und das zweite zu 1,7 führt. Das bedeutet, dass das Seitenverhältnis eines hohen Bildschirms kleiner ist als das eines breiten Bildschirms, und Porträts kleinere Seitenverhältnisse haben als Landschaftsaufnahmen.
Häufige Seitenverhältnisse
Verhältnis | Verwendung | |
---|---|---|
4/3 oder 1.33333 |
![]() |
Traditionelles TV-Format im zwanzigsten Jahrhundert. |
16/9 oder 1.7777778 |
![]() |
Modernes "Widescreen"-TV-Format. |
185/100 oder 1.85 |
![]() |
Das häufigste Filmformat seit den 1960er Jahren. |
239/100 oder 2.39 |
![]() |
"Widescreen", anamorphen Filmformat. |
Formaler Syntax
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
Beispiele
Verwendung in einer Media-Query
@media screen and (min-aspect-ratio: 16/9) {
/* … */
}
Verwendung in einer @container-Größenabfrage
@container (aspect-ratio > 1) and (width < 20em) {
/* … */
}
Verwendung als Wert für eine CSS-Eigenschaft
.square {
aspect-ratio: 1 / 1;
}
.circle {
aspect-ratio: 1;
border-radius: 50%;
}
.portrait {
aspect-ratio: 5 / 7;
}
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # ratio-value |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<ratio> | ||||||||||||
Accepts a single <number> as a value. |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
Siehe auch
aspect-ratio
Mediendeskriptor- Verständnis von Seitenverhältnissen
- CSS Container-Queries Leitfaden
- Verwendung von Containergrößen- und Stilabfragen Leitfaden
- CSS Media-Queries Modul
- CSS Containment Modul
- CSS Box-Sizing Modul
- CSS Werte und Einheiten Modul