Unrapport d'aspect est la relation proportionnelle entre la largeur et la hauteur d'un élément ou de lazone d'affichage. Il s'exprime comme un<ratio> de deux nombres.

Le fait de définir un rapport d'aspect, qu'il soit inhérent (comme pour les images et vidéos) ou défini de façon extrinsèque, permet de conserver les proportions prévues d'un élément. Il est aussi possible d'interroger le rapport d'aspect d'un élément ou d'une zone d'affichage, ce qui est utile pour développer des composants et des mises en page flexibles.

En CSS, le type de donnée<ratio> s'écrit sous la formelargeur / hauteur (par exemple,1 / 1 pour un carré,16 / 9 pour du format large) ou comme un nombre seul, auquel cas ce nombre représente la largeur et la hauteur vaut1.

.wideBox {  aspect-ratio: 5 / 2;}.tallBox {  aspect-ratio: 0.25;}

En SVG, le rapport d'aspect est défini par l'attributviewBox à quatre valeurs. Les deux premières valeurs sont les coordonnées X et Y minimales d'origine que le SVG peut avoir, et les deux suivantes sont la largeur et la hauteur qui fixent le rapport d'aspect du SVG.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"></svg>

Dans les API JavaScript, interroger un rapport d'aspect retourne un nombre flottant en double précision représentant la largeur divisée par la hauteur. On peut aussi utiliser JavaScript pour définir le rapport d'aspect d'un élément. Par exemple, définir une contrainte de rapport d'aspect pour une vidéo 1920x1080 avec le dictionnaireMediaStreamTrack ouMediaTrackSettings et la propriétéaspectRatio sera calculé comme 16/9, ou 1920/1080, soit1.7777777778 :

const constraints = {  width: 1920,  height: 1080,  aspectRatio: 1.777777778,};myTrack.applyConstraints(constraints);

Voir aussi

• La propriété CSSaspect-ratio
• Comprendre les rapports d'aspect
• Le module detaille de boîte CSS
• Termes associés du glossaire :
  • intrinsic size
• Valeurs de propriété CSSmin-content,max-content etfit-content.