aspect-ratio est une caractéristique média CSS dont la valeur correspond au ratio (<ratio>) entre la largeur et la hauteur de la zone d'affichage (viewport).

Syntaxe

La caractéristique aspect-ratio est définie avec un ratio (type CSS <ratio>) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-aspect-ratio et max-aspect-ratio afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.

Exemples

HTML

<div>
   Regardez l'évolution de cet élément lorsque
   vous redimensionnez la hauteur et la largeur
   du viewport.
</div>

CSS

/* Ratio exact */
@media (aspect-ratio: 1/1) {
  div {
    color: red;
  }
}

/* Ration minimal */
@media (min-aspect-ratio: 8/5) {
  div {
    background: yellow;
  }
}

/* Ratio maximal */
@media (max-aspect-ratio: 2/1) {
  div {
    border: 2px solid blue;
  }
}

Résultat

Spécifications

Spécification État Commentaires
Media Queries Level 4
La définition de 'aspect-ratio' dans cette spécification.
Version de travail Aucune modification.
Media Queries
La définition de 'aspect-ratio' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple ? 3.5 (1.9.1) 9.0 ? ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,