Mode d’emploi
- Pour redimensionner, saisissez le ratio (par exemple 16 et 9) ou choisissez un format courant, puis indiquez une largeur ou une hauteur. L’autre dimension est calculée automatiquement.
- Pour trouver un ratio, saisissez la largeur et la hauteur d’une image, d’un écran ou d’une vidéo.
- Vérifiez l’aperçu et copiez la règle CSS aspect-ratio si vous en avez besoin pour une mise en page Web.
Fonctionnement
Pour redimensionner proportionnellement, utilisez hauteur = largeur × hauteur du ratio ÷ largeur du ratio (et l’inverse). Les dimensions en pixels sont généralement des nombres entiers, le résultat peut donc être arrondi ; lorsqu’un ratio ne donne pas un résultat entier, comme 16:9 avec une largeur de 1000, la hauteur arrondie (563) est une approximation proche, et non une correspondance exacte.
Une dimension se simplifie en divisant les deux côtés par leur plus grand diviseur commun : 1920 et 1080 sont divisibles par 120, ce qui donne 16:9. Certaines dimensions réelles ne correspondent pas à un ratio courant. 1366×768 équivaut exactement à 683:384, un ratio très proche de 16:9 ; l’outil affiche donc aussi le ratio courant le plus proche lorsqu’il se situe à moins de 2 %. De même, les écrans « 21:9 » sont en réalité au format 64:27 (2560×1080) ou 43:18 (3440×1440) ; 21:9 est une appellation commerciale.
En CSS, aspect-ratio: 16 / 9 permet à un élément de conserver cette forme lorsque sa largeur change. Cette propriété est utile pour les vidéos intégrées et les espaces réservés aux images, afin d’éviter tout décalage de la mise en page pendant le chargement.
Exemples
Dimensions d’une vignette vidéo
Une vignette au format 16:9 qui doit faire 1280 pixels de large doit mesurer 720 pixels de haut.
Identifier le format d’un écran
2560×1600 se simplifie en 8:5, soit le même format que 16:10, courant sur les ordinateurs portables.
Recadrage portrait pour les réseaux sociaux
Avec un ratio de 4:5 et une largeur de 1080, la hauteur est de 1350, un format portrait accepté par de nombreux fils d’actualité.
Foire aux questions
16:9, c’est la même chose que 1,78:1 ?
Oui. 16 ÷ 9 ≈ 1,778 : ces deux valeurs décrivent donc la même forme. Les formats cinéma sont souvent exprimés en décimales, par exemple 2,39:1.
Pourquoi mon résultat comporte-t-il des décimales ?
Toutes les largeurs ne sont pas divisibles exactement par le ratio. Activez l’arrondi pour les dimensions en pixels : le résultat sera alors arrondi au pixel entier le plus proche, ce qui peut légèrement l’écarter du ratio exact.
La propriété CSS aspect-ratio fonctionne-t-elle partout ?
Cette propriété est prise en charge par tous les principaux navigateurs actuels. Si un élément a aussi une largeur et une hauteur définies explicitement, ces valeurs sont prioritaires sur aspect-ratio.
Confidentialité
Tous les calculs sont effectués dans votre navigateur. Aucune donnée n’est envoyée ni stockée.