<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.

Le type de donnée CSS <ratio> permet de décrire les proportions dans les media queries (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.

Syntaxe

Une valeur de ce type se compose d'un entier strictement positif (type <integer>, suivi d'une barre oblique ('/', Unicode U+002F SOLIDUS) puis d'un second entier strictement positif (type <integer>). Il est possible d'avoir des espaces avant et après la barre oblique.

Exemples

Utiliser dans une media query

css
@media screen and (min-aspect-ratio: 16/9) {}

Ratios fréquemment utilisés

Ratio Utilisation
4/3 Format traditionnel utilisé par les télévisions au XXe siècle.
16/9 Format « moderne » des télévisions.
185/100 = 91/50 (les numérateurs et dénominateurs décimaux ne sont pas autorisés) Le format le plus utilisé pour la projection de films depuis les années 1960.
239/100 (les numérateurs et dénominateurs décimaux ne sont pas autorisés) Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).

Exemple appliqué

CSS

css
@media screen and (min-aspect-ratio: 1/1) {
  .exemple {
    background-color: palegreen;
  }
}

HTML

html
<p class="exemple">
  Essayez de m'étirer en longueur ou de me réduire en largeur
</p>

Résultat

Spécifications

Specification
CSS Values and Units Module Level 4
# ratio-value

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<ratio>
Accepts a single <number> as a value.
Experimental

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.

Voir aussi