Calculateur de ratio d'aspect

Comment utiliser le calculateur de ratio d’aspect

1. Choisissez un des Ratios courants (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) ou saisissez vos valeurs dans Ratio ou taille d’origine. Vous pouvez indiquer un ratio (16 et 9) ou les dimensions réelles d’une image, d’une vidéo ou d’un écran (1920 et 1080).
2. Lisez les résultats : le Ratio simplifié, le Ratio décimal (largeur divisée par hauteur), l’Orientation et le Format standard le plus proche. Le signe « ≈ » indique que votre format est proche de ce standard, sans lui être identique.
3. Dans Nouvelle taille (proportions gardées), saisissez une Nouvelle largeur pour obtenir la hauteur correspondante, ou une Nouvelle hauteur pour obtenir la largeur. La ligne en dessous détaille le calcul. Décochez Arrondir au pixel entier si vous avez besoin de la valeur exacte, par exemple pour un format d’impression en millimètres.
4. Inverser largeur et hauteur fait passer un format paysage en portrait (16:9 devient 9:16), et inversement.
5. L’Aperçu dessine un cadre à vos proportions, et le tableau donne la taille de chaque ratio courant pour votre nouvelle largeur.
6. Copiez le Code CSS avec Copier.

Comment se fait le calcul

Un ratio d’aspect, c’est la largeur divisée par la hauteur, écrite sous forme de deux nombres entiers. Pour le simplifier, l’outil divise les deux côtés par leur plus grand commun diviseur (PGCD) : le PGCD de 1920 et 1080 vaut 120, donc 1920:1080 = 16:9. Les nombres décimaux sont d’abord multipliés par une puissance de dix (2,39:1 devient 239:100).

Redimensionner sans déformer revient à faire une règle de trois :

• nouvelle hauteur = nouvelle largeur × hauteur d’origine ÷ largeur d’origine
• nouvelle largeur = nouvelle hauteur × largeur d’origine ÷ hauteur d’origine

Exemple : une vidéo 16:9 de 1280 px de large mesure 1280 × 9 ÷ 16 = 720 px de haut.

Certains écrans ont des formats « bizarres ». Un portable en 1366 × 768 se simplifie en 683:384, soit 1,779:1, à un cheveu du 16:9 (1,778:1), d’où « ≈ 16:9 ». Les moniteurs vendus comme 21:9 sont en réalité en 64:27 (2560 × 1080) ou en 43:18 (3440 × 1440) : c’est pourquoi les deux figurent dans le tableau.

La propriété CSS aspect-ratio

aspect-ratio: 16 / 9; demande au navigateur de calculer la dimension manquante : avec width: 100%, la hauteur suit automatiquement et le bloc s’adapte à son conteneur. La propriété fonctionne dans tous les navigateurs actuels (depuis 2021) et convient parfaitement aux vidéos intégrées, aux cartes, aux emplacements d’images et aux vignettes. Ajoutez object-fit: cover sur une image pour la recadrer au lieu de la déformer.

Le code contient aussi l’ancienne technique du padding-top en solution de repli : un padding en pourcentage se calcule à partir de la largeur, donc padding-top: 56.25% (9 ÷ 16) réserve une zone 16:9 dans laquelle le contenu est positionné en absolu. Elle n’est utile que pour de très vieux navigateurs.

Réserver la place avec un ratio évite aussi les décalages de mise en page pendant le chargement des images et des vidéos, ce qui améliore le score CLS (Cumulative Layout Shift).