# Qu'est-ce que le Ratio de Format (Aspect Ratio) ?
En design graphique, photographie et développement frontend, l'Aspect Ratio ou ratio de format décrit la relation géométrique entre la largeur et la hauteur d'une image, d'un écran ou d'un conteneur. Il est représenté par deux chiffres séparés par deux points (ex.16:9), indiquant comment la hauteur augmente proportionnellement en fonction de la largeur.Mal gérer les ratios de format est une cause habituelle de photographies écrasées, de vidéos avec des recadrages imprévus (letterboxing) ou de composants web qui cassent leur mise en page lors de l'affichage sur des écrans de différentes tailles.# Ratios Courants dans l'Industrie
Selon votre discipline, vous devrez constamment gérer un nombre limité de proportions standard mondiales :- 16:9 (Panoramique) : Le format dominant pour les moniteurs modernes, téléviseurs, enregistrements YouTube ou résolutions haute définition standard (comme 1920×1080 ou 4K).
- 9:16 (Vertical) : Né de la consommation de contenu mobile natif (TikTok, Instagram Reels, YouTube Shorts). Exactement le même ratio que les vidéos panoramiques, mais avec la rotation physique du dispositif appliquée.
- 4:3 (Classique / Vintage) : Présent dans les anciennes télévisions et moniteurs ou dans les appareils photo argentiques et numériques spécialisés. Son apparence légèrement carrée attire directement l'attention sur l'axe central compositionnel.
# Développement Web et la propriété CSS aspect-ratio
Autrefois en CSS, on dépendait de systèmes mathématiques complexes utilisant un Padding Hack (comme injecter unpadding-top: 56.25%) pour réserver des espaces dynamiques dans les iframes YouTube ou les images de couverture, afin d'éviter un terrible Cumulative Layout Shift (CLS).Aujourd'hui, toutes les mises en page modernes appliquent directement des propriétés comme aspect-ratio: 16 / 9;, obtenant un code sémantique et permettant au navigateur de dériver automatiquement la mesure manquante à partir de la largeur originale définie via Grid ou Flexbox.Ce calculateur local de pixels transfère la puissance de design à un calcul de mise à l'échelle instantané qui protégera vos rendus des mauvaises configurations.