<ratio>

Syntax

Der <ratio> Datentyp ist eine <number> gefolgt von einem Schrägstrich ('/', Unicode U+002F SOLIDUS) und einer 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 eine einzelne <number> als Wert zulässig.

Zwei Verhältnisse werden durch Vergleichen der Zahlenwerte der Quotienten verglichen. Zum Beispiel ist 16/16 kleiner als 16/9, da es sich auf 1 auflöst, während das zweite sich auf 1,7 auflöst. Das bedeutet, dass das Seitenverhältnis eines hohen Bildschirms kleiner ist als das eines breiten Bildschirms, und Porträtbilder haben kleinere Seitenverhältnisse als Landschaftsbilder.

Übliche 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 gebräuchlichste Filmformat seit den 1960er Jahren.
239/100 oder 2.39		"Widescreen", anamorphes Filmformat.

Formale Syntax

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?  

Beispiele

Verwendung in einer Media Query

@media screen and (aspect-ratio >= 16/9) {
  /* … */
}

Verwendung in einer @container Größenabfrage

@container (aspect-ratio > 1) and (width < 20em) {
  /* … */
}

Verwendung als CSS-Wert einer Eigenschaft

.square {
  aspect-ratio: 1 / 1;
}
.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}
.portrait {
  aspect-ratio: 5 / 7;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aspect-ratio Mediendeskriptor
• Verständnis von Seitenverhältnissen
• CSS-Containerabfragen Leitfaden
• Verwendung von Containergrößen- und Stilabfragen Leitfaden
• CSS-Medienabfragen Modul
• CSS-Eindämmung Modul
• CSS-Box-Sizing Modul
• CSS-Werte und -Einheiten Modul