aspect-ratio

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La caractéristique média CSS aspect-ratio peut être utilisée pour tester le rapport d'aspect de la zone d'affichage.

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

Dans l'exemple ci-dessous, un élément <div> est contenu dans un <iframe>. L'iframe crée sa propre zone d'affichage. Redimensionnez l'<iframe> pour voir aspect-ratio en action.

Notez que, lorsque aucune des conditions de requête média n'est vraie, l'arrière-plan devient blanc car aucune des règles ci-dessous ne s'applique au <div> à l'intérieur de l'<iframe>. Essayez de trouver quelles valeurs de largeur et de hauteur déclenchent ce comportement !

HTML

html

<iframe id="outer">
  <div id="inner">
    Watch this element as you resize iframe viewport's width and height.
  </div>
</iframe>

CSS

css

/* Rapport d'aspect minimal autorisé */
/* Sélectionne les rapports d'aspect 8/5 = 1,6 et plus */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9999ff; /* bleu */
  }
}

/* Rapport d'aspect maximal autorisé */
/* Sélectionne les rapports d'aspect 3/2 = 1,5 et moins */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #99ff99; /* vert */
  }
}

/* Rapport d'aspect exact, placer en bas pour éviter l'écrasement */
@media (aspect-ratio: 1/1) {
  div {
    background: #ff9999; /* rouge */
  }
}

Résultat

<label id="wf" for="w">largeur&nbsp;: 165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">hauteur&nbsp;: 165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />
<label id="ratio">aspect-ratio&nbsp;: 165/165 = 1</label>

<iframe
  id="outer"
  srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #9999ff; } } @media (max-aspect-ratio: 3/2) { div { background: #99ff99; } } @media (aspect-ratio: 1/1) { div { background: #ff9999; } }</style><div id='inner'> Observez cet élément lorsque vous redimensionnez la largeur et la hauteur de la zone d'affichage de l'iframe.</div>">
</iframe>

iframe {
  display: block;
  border: 1px dashed black;
}

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

const updateRatio = () => {
  ratio.textContent = `aspect-ratio : ${w.value}/${h.value} = ${(w.value / h.value).toFixed(2)}`;
};

w.onchange = w.oninput = () => {
  outer.style.width = `${w.value}px`;
  wf.textContent = `largeur : ${w.value}`;
  updateRatio();
};

h.onchange = h.oninput = () => {
  outer.style.height = `${h.value}px`;
  hf.textContent = `hauteur : ${h.value}`;
  updateRatio();
};

Remarquez que min-aspect-ratio: 8/5 définit la borne inférieure à 1,6, donc cette requête média sélectionne les éléments dont le rapport d'aspect est de 1,6 ou plus. max-aspect-ratio: 3/2 définit la borne supérieure, donc cette requête média sélectionne les éléments dont le rapport d'aspect est de 1,5 ou moins. aspect-ratio: 1/1 écrase la règle de rapport d'aspect maximal car elle est déclarée après et sélectionne les éléments dont le rapport d'aspect est exactement 1.

Depuis l'état initial, lorsque vous réduisez la hauteur, le rapport d'aspect commence à augmenter à partir de un. Ainsi, la couleur de fond du div passe de rouge (1) < vert (1,5) < blanc < bleu (1,6).

Spécifications

Specification
Media Queries Level 4 # aspect-ratio

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨30 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content