Ratio d'aspect (CSS)

La propriété CSS aspect-ratio définit la proportion entre la largeur et la hauteur d'un élément, par exemple 16 sur 9 pour une vidéo ou 1 sur 1 pour un carré. Le navigateur conserve cette forme quand l'élément se redimensionne, ce qui est essentiel pour des images, vidéos, cartes et embeds responsives qui ne doivent ni se déformer ni décaler la mise en page.

Comment fonctionne la propriété

On écrit le ratio avec deux nombres séparés par une barre oblique. Si une seule dimension est définie, le navigateur calcule l'autre à partir du ratio.

• aspect-ratio: 16 / 9; avec width: 100%; donne une boîte 16:9 pleine largeur.
• aspect-ratio: 1; est un raccourci pour un carré parfait.
• Une height fixée ou une taille de contenu intrinsèque peut l'emporter sur la dimension calculée : associez-le à une seule dimension fixe pour un résultat prévisible.

Les ratios courants

Un petit ensemble de ratios couvre la plupart des interfaces.

Stabilité de la mise en page et Core Web Vitals

Réserver l'espace avec un ratio fixe évite le décalage de mise en page pendant le chargement d'une image ou d'une vidéo. Cela améliore directement le Cumulative Layout Shift (CLS), l'un des Core Web Vitals que Google utilise comme signal de classement, car le contenu autour ne saute pas quand le média apparaît.

Utiliser aspect-ratio avec les images

Définissez aspect-ratio et une largeur sur une image, puis ajoutez object-fit: cover; pour que l'image remplisse la boîte et se recadre au lieu de s'étirer. Une galerie reste ainsi nette même avec des images de dimensions variées, et cela se marie bien avec les attributs width et height qui laissent le navigateur réserver l'espace avant le CSS.

L'ancien hack du padding et la compatibilité

Avant cette propriété, on simulait les ratios avec une astuce de padding-top en pourcentage et du positionnement absolu, verbeux et fragile. La propriété native aspect-ratio remplace ce hack par une ligne claire et elle est prise en charge par tous les navigateurs modernes, le hack n'est donc plus nécessaire.

Le ratio d'aspect chez BeBranded

Chez BeBranded, nous fixons les médias à des ratios cohérents pour que galeries et cartes restent nettes et que les pages ne sautent pas au chargement, ce qui protège le design comme les Core Web Vitals. Cela fait partie du front-end stable et soigné de notre travail de design.