Les bannières, les vignettes et les emplacements de héros partagent tous un même mode d'échec : le média arrive en retard, la boîte s'effondre et la page en dessous se déplace. le rapport d'aspect transforme cette boîte en une promesse que le moteur lui-même tient, ce qui est un contrat très cool pour une seule déclaration.
/* both of these hold their shape before and after load */
.banner { aspect-ratio: 16 / 9; width: 100%; }
.avatar { aspect-ratio: 1; width: 5rem; }Pourquoi il bat le hack de rembourrage
/* the old trick: correct math, unreadable by humans */
.media { padding-top: 56.25%; }- le format d'image fonctionne sur n'importe quel élément, pas seulement sur les images et les vidéos, de sorte que les cartes, les bandes de bannière et les vignettes d'icônes reçoivent toutes une seule déclaration au lieu d'une astuce de remplissage en pourcentage basée sur un contenu invisible.
- Les tailles explicites gagnent : définissez à la fois la largeur et la hauteur et le navigateur les honore ; laissez l'axe transversal automatique et le rapport maintient la boîte stable.
- Les éléments remplacés tels que img et video conservent leur rapport intrinsèque comme valeur par défaut, de sorte qu'une photo en portrait ne s'étire jamais pour remplir un emplacement en paysage.
Ratios à l'intérieur du flex et de la grille
Le contrat survit au dimensionnement par d'autres : une carte dont la largeur provient d'une piste quadrillée calcule toujours sa hauteur à partir du rapport. Lorsqu'une mise en page vous surprend, mesurez d'abord avec l'inspecteur de boîtes, car le coupable habituel est un alignement d'étirement qui définit explicitement l'axe transversal.
Une mise en garde mérite d'être soulignée : le dimensionnement minimum du contenu peut remplacer le rapport dans une ligne flexible serrée, alors donnez à ces boîtes une base flexible explicite. Ajoutez-le une fois et la propriété reste remarquablement stable partout où vous l'utilisez.