Qu’est-ce que le ratio d’aspect
C’est la proportion entre la largeur et la hauteur d’une image, notée largeur:hauteur. Une image de
1920 × 1080 et une autre de 1280 × 720 ont des tailles différentes mais le même ratio, 16:9 : la seconde est la première
réduite. C’est pourquoi le ratio compte quand vous concevez un emplacement, et la taille en pixels quand vous exportez.
Comment le calculer
Pour obtenir la hauteur : hauteur = largeur × hauteur du ratio ÷ largeur du ratio. Avec une largeur de 1280 et du 16:9, 1280 × 9 ÷ 16 = 720. Pour la largeur, c’est l’inverse : largeur = hauteur × 16 ÷ 9. Et pour trouver le ratio d’une taille, on divise largeur et hauteur par leur plus grand commun diviseur : 1920 et 1080 divisés par 120 donnent 16 et 9.
Toutes les tailles ne donnent pas un ratio « rond ». 1366 × 768, la résolution de nombreux portables, vaut 683:384, que l’on traite en pratique comme du 16:9.
Des images à un ratio donné sur ximg.es
Le générateur accepte le ratio directement dans l’URL : /1280x16:9 renvoie une image
de 1280 × 720, et /16:9x720 calcule la largeur à partir de la hauteur. Si le résultat n’est pas entier, il
est tronqué : /600x16:9 donne 600 × 337, et non 600 × 338.
<img src="https://ximg.es/1280x16:9" width="1280" height="720" alt="">
<img src="https://ximg.es/1080x4:5/e2e8f0/475569.webp" width="1080" height="1350" alt="">aspect-ratio en CSS
La propriété aspect-ratio réserve l’espace d’une image ou d’une vidéo avant son chargement, et évite que la
page ne saute. Avec object-fit: cover, n’importe quelle image est recadrée pour s’adapter au ratio :
.vignette {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Si vous indiquez width et height dans la balise <img>, le navigateur calcule ce ratio tout seul.