aspect-ratio

Exemple interactif

aspect-ratio: auto;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: 0.5;

<section id="default-example">
  <img
    class="transition-all"
    height="640"
    id="example-element"
    src="/shared-assets/images/examples/plumeria.jpg"
    width="466" />
</section>

#example-element {
  height: 100%;
  width: auto;
}

Syntaxe

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* repli de 'auto' pour les éléments remplacés */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Valeurs globales */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

Cette propriété se définit avec le mot-clé auto, un <ratio>, ou les deux. Si les deux sont présents et que l'élément est un élément remplacé, comme <img>, alors le rapport défini est utilisé jusqu'a ce que le contenu soit chargé. Une fois le contenu chargé, la valeur auto s'applique, donc le rapport d'aspect intrinsèque du contenu chargé est utilisé.

Si l'élément n'est pas un élément remplacé, alors le ratio défini est utilisé.

Valeurs

auto

Les éléments remplacés ayant un rapport d'aspect intrinsèque utilisent ce rapport d'aspect, sinon la boîte n'a pas de rapport d'aspect préférentiel. Les calculs de taille impliquant un rapport d'aspect intrinsèque utilisent toujours les dimensions de la boîte de contenu.

<ratio>

Le rapport d'aspect préférentiel de la boîte est le rapport défini par width / height. Si height et la barre oblique précédente sont omis, height vaut 1. Les calculs de taille impliquant le rapport d'aspect préférentiel utilisent les dimensions de la boîte définies par box-sizing.

auto && <ratio>

Lorsque auto et un <ratio> sont définis ensemble, auto est utilisé si l'élément est un élément remplacé avec un rapport d'aspect naturel, comme un élément <img>. Sinon, le rapport défini par width / height est utilisé comme rapport d'aspect préférentiel.

Définition formelle

Syntaxe formelle

aspect-ratio = 
  auto     ||
  <ratio>  

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?  

Exemples

Explorer les effets de aspect-ratio avec une largeur fixe

Dans cet exemple, la largeur des éléments <div> est définie à 100px et la hauteur à auto. Puisque la valeur de largeur est fixe ici, la propriété aspect-ratio n'affecte que la hauteur des éléments <div> afin de maintenir le rapport largeur/hauteur défini.

<div>1/1</div>
<div>0.5</div>
<div>1</div>
<div>1/0.5</div>
<div>16/9</div>

div {
  display: inline-flex;
  background-color: lime;
  justify-content: center;
}

div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}

Solution de repli sur le rapport d'aspect naturel

Dans cet exemple, nous utilisons deux éléments <img>. Le premier élément n'a pas d'attribut src pointant vers un fichier image.

<img src="" /> <img src="plumeria.jpg" />

Le code suivant définit 3/2 comme rapport d'aspect préférentiel et auto comme solution de repli.

img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}

Remarquez que la première image sans contenu remplacé conserve le rapport d'aspect 3/2, tandis que la seconde image, une fois le contenu chargé, utilise le rapport d'aspect naturel de l'image.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Comprendre les rapports d'aspect
• Rapport d'aspect des images : éviter les saccades lors du chargement
• Concevoir une unité de rapport d'aspect pour CSS ^(angl.)
• Définir la hauteur et la largeur des images redevient important ^(angl.)