Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

<ratio>

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

  Ratio Utilisation
Ratio4_3.png 4/3 Format traditionnel utilisé par les télévisions au XXe siècle.
Ratio16_9.png 16/9 Format « moderne » des télévisions.
Ratio1_1.85.png 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.
Ratio1_2.39.png 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

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

HTML

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

Résultat

Spécifications

Spécification État Commentaires
Media Queries
La définition de '<ratio>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui) 3.5 (1.9.1) 9 9.5 (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple (Oui) (Oui) ? (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,