La propriétéCSSaspect-ratio permet de définir le rapport largeur/hauteur désiré pour la boîte d'un élément. Cela signifie que même si la taille du conteneur parent ou de la zone d'affichage change, le navigateur ajuste les dimensions de l'élément pour maintenir le rapport largeur/hauteur défini. Leratio d'aspect défini est utilisé dans le calcul des tailles automatiques et d'autres fonctions de mise en page.

Au moins une des dimensions de la boîte doit être automatique pour queaspect-ratio ait un effet. Si ni la largeur ni la hauteur n'est une taille automatique, alors le rapport d'aspect fourni n'a aucun effet sur les tailles préférentielles de la boîte.

Exemple interactif

aspect-ratio: auto;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: 0.5;

<section>  <img       height="640"       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 valeurauto 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 leratio défini est utilisé.

Valeurs

auto

Leséléments remplacés ayant un rapport d'aspect intrinsèque utilisentce 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 parwidth /height. Siheight et la barre oblique précédente sont omis,height vaut1. Les calculs de taille impliquant le rapport d'aspect préférentiel utilisent les dimensions de la boîte définies parbox-sizing.

auto && <ratio>

Lorsqueauto 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 parwidth /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 deaspect-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'attributsrc pointant vers un fichier image.

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

Le code suivant définit3/2 comme rapport d'aspect préférentiel etauto 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'aspect3/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.)