Calculateur de rapport d'aspect CSS

Le rapport d'aspect décrit la proportion entre la largeur et la hauteur d'un élément. Il s'écrit avec deux nombres séparés par deux-points, comme 16:9, et reste identique lorsque les deux dimensions sont multipliées par le même facteur. Les développeurs web l'utilisent pour réserver un espace stable aux images, vidéos, contenus intégrés, cartes et composants responsive avant la fin de leur chargement. Ce calculateur réduit toute paire de dimensions entières et produit la déclaration CSS moderne correspondante. La réduction utilise le plus grand commun diviseur de la largeur et de la hauteur. Pour 1920 sur 1080, il vaut 120. Diviser les deux dimensions par 120 donne 16 sur 9. La valeur décimale est la largeur divisée par la hauteur : 16:9 vaut environ 1.7778. La propriété CSS aspect-ratio accepte les nombres réduits comme les dimensions d'origine, mais la forme réduite est plus facile à reconnaître et à vérifier. La déclaration générée peut être collée dans une règle visant un conteneur d'image, un cadre vidéo, un élément de grille ou une autre boîte. La propriété aspect-ratio fournit un ratio préféré. Si la largeur est définie et la hauteur automatique, le navigateur déduit la hauteur du ratio. Si la hauteur est définie et la largeur automatique, il peut déduire la largeur. Lorsque les deux dimensions sont explicitement fixes, le ratio ne les remplace pas. Contenu, tailles minimales et maximales, modèle de boîte et contraintes de mise en page peuvent aussi influencer le rendu final. Associer width: 100% à un rapport d'aspect est une méthode courante pour créer des conteneurs multimédias responsive. Le rapport d'aspect diffère de la résolution. Deux images peuvent être en 16:9 tout en contenant des nombres de pixels très différents, comme 1280 sur 720 et 3840 sur 2160. Le ratio contrôle la forme, tandis que la résolution influence les détails, le poids du fichier et la densité d'affichage. Recadrer vers un autre ratio supprime du contenu ; insérer toute l'image dans une boîte de forme différente peut laisser du vide. Les valeurs CSS object-fit, telles que cover et contain, déterminent le comportement du contenu remplacé dans l'espace réservé. Pour éviter les décalages de mise en page, utilisez les dimensions intrinsèques de la ressource source. Les attributs HTML width et height permettent au navigateur d'inférer le ratio, même si le CSS responsive change la taille affichée. Pour des images adaptées à la composition ou des points de rupture particuliers, vérifiez que chaque source sélectionnée a le cadrage voulu. Toute unité commune convient, car seule la proportion compte ; les entiers sont toutefois requis pour obtenir une réduction exacte par le plus grand commun diviseur et un ratio simple et prévisible.