Qu'est-ce que le calculateur de ratio d'aspect CSS ?
Cet outil transforme n'importe quelle largeur et hauteur en pixels en un ratio d'aspect propre et simplifié, comme 16:9 ou 4:3. Il calcule également le célèbre pourcentage de padding-top utilisé pour conserver des conteneurs responsives (vidéos, iframes, habillages d'images) à des proportions fixes, à l'époque où la propriété CSS moderne aspect-ratio n'était pas encore largement prise en charge.
Comment l'utiliser
Saisissez la largeur et la hauteur d'origine en pixels. Le calculateur réduit le ratio à sa forme la plus simple à l'aide du plus grand commun diviseur (PGCD), affiche le ratio décimal (largeur ÷ hauteur) et vous fournit le pourcentage de padding-top à intégrer directement dans votre CSS.
La formule expliquée
On commence par trouver le PGCD de la largeur et de la hauteur. En divisant les deux nombres par ce PGCD, on obtient le ratio simplifié. Par exemple, 1920 et 1080 ont un PGCD de 120 : le ratio devient donc 16:9. L'astuce du padding-top utilise hauteur ÷ largeur × 100, car le padding exprimé en pourcentage se calcule par rapport à la largeur de l'élément.
Exemple concret
Pour une image de 1920×1080 : PGCD(1920, 1080) = 120. Ratio = \(1920/120 : 1080/120 = \mathbf{16:9}\). Décimal = \(1920 \div 1080 \approx 1{,}7778\). Padding-top = \(1080 \div 1920 \times 100 = \mathbf{56{,}25\,\%}\). Un habillage responsive utiliserait donc padding-top: 56.25%.
FAQ
Pourquoi utiliser padding-top plutôt que la propriété aspect-ratio ? L'astuce du padding-top fonctionne dans tous les navigateurs, y compris les plus anciens. Pour les projets récents, on peut simplement écrire aspect-ratio: 16 / 9;.
Le pourcentage se base-t-il sur la largeur ou la hauteur ? En CSS, les pourcentages de padding vertical sont toujours relatifs à la largeur du bloc conteneur : c'est précisément pour cela que la formule est hauteur ÷ largeur.
Et si mes valeurs ne se simplifient pas joliment ? Toute largeur et toute hauteur produisent un ratio valide ; il se peut simplement qu'il ne corresponde pas à un nom courant comme 16:9. Dans ces cas, le ratio décimal s'avère bien utile.
