aspect-ratio

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

Note : L'exemple suivant est contenu dans un élément <iframe> et crée donc sa propre zone d'affichage (viewport), vous pouvez redimensionner l'iframe afin d'observer l'effet d'aspect-ratio.

HTML

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">

<iframe id="outer" src="data:text/html,
  <style>
    @media (min-aspect-ratio: 8/5) {
      div {
        background: %239af;
      }
    }
    @media (max-aspect-ratio: 3/2) {
      div {
        background: %239ff;
      }
    }
    @media (aspect-ratio: 1/1) {
      div {
        background: %23f9a;
      }
    }
  </style>
  <div id='inner'>
    Vous pouvez redimensionner le viewport en largeur 
    et en hauteur pour voir l'effet.
  </div>
">

</iframe>

CSS

iframe{
  display:block;
}

JavaScript

outer.style.width=outer.style.height="165px"

w.onchange=w.oninput=function(){
  outer.style.width=w.value+"px"
  wf.textContent="width:"+w.value
}
h.onchange=h.oninput=function(){
  outer.style.height=h.value+"px"
  hf.textContent="height:"+h.value
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
aspect-ratio media featureChrome Support complet 3Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet OuiSafari Support complet 4.1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 4.2Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet