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

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.

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

iframe{
  display:block;
}

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
}