Comment fonctionne le ratio d'aspect CSS

Vous avez défini width: 100% sur un conteneur d’image, mais la hauteur s’effondre à zéro jusqu’au chargement de l’image, provoquant ce décalage de mise en page brutal que les utilisateurs détestent. La propriété CSS aspect-ratio résout ce problème directement, vous permettant de réserver de l’espace pour le contenu avant son arrivée.

Cet article explique comment la propriété aspect-ratio participe aux calculs de dimensionnement CSS, comment elle diffère entre les éléments remplacés et non remplacés, et pourquoi elle remplace l’ancienne technique du padding-hack pour les mises en page responsives.

Comprendre la propriété CSS Aspect-Ratio

La propriété aspect-ratio définit un ratio largeur/hauteur préféré pour la boîte d’un élément. Le mot clé est « préféré »—elle ne prend effet que lorsqu’au moins une dimension est automatique.

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Ici, la largeur est explicite (100% du parent), donc le navigateur calcule automatiquement la hauteur en utilisant le ratio 16:9. Si vous définissez à la fois width et height explicitement, aspect-ratio n’affecte généralement pas la taille utilisée, car les dimensions définies ont la priorité dans les calculs de mise en page normaux.

Syntaxe et valeurs

La propriété accepte trois formes :

aspect-ratio: 16 / 9;      /* ratio largeur / hauteur */
aspect-ratio: 1;            /* équivalent à 1 / 1 (carré) */
aspect-ratio: auto 3 / 2;  /* auto avec ratio de secours */

Le mot-clé auto indique au navigateur d’utiliser le ratio d’aspect naturel de l’élément s’il en existe un. La combinaison auto 3 / 2 signifie : utiliser le ratio naturel pour les éléments remplacés, sinon utiliser 3/2.

Éléments remplacés vs. non remplacés

La propriété se comporte différemment selon le type d’élément.

Les éléments remplacés (<img>, <video>, <iframe>) ont des dimensions intrinsèques. Par défaut, aspect-ratio: auto utilise leur ratio naturel. Lorsque vous spécifiez aspect-ratio: auto 16/9, le navigateur utilise le ratio naturel du média une fois chargé, mais réserve l’espace en utilisant 16/9 au préalable—évitant ainsi le décalage de mise en page.

Les éléments non remplacés (<div>, <section>) n’ont pas de ratio intrinsèque. Définir aspect-ratio: 1 sur une <div> avec width: 200px produit un carré de 200×200. La propriété contrôle directement les dimensions de la boîte.

Aspect-Ratio façonne la boîte, pas le média

Une distinction critique : aspect-ratio contrôle les dimensions du conteneur, pas la façon dont le média le remplit. Pour les images ou vidéos, utilisez object-fit pour contrôler le comportement du média dans la boîte :

.thumbnail {
  aspect-ratio: 1;
  object-fit: cover;
}

Cela crée un conteneur carré où l’image couvre la zone, en recadrant si nécessaire.

CSS Aspect Ratio vs. le hack du padding

Avant que aspect-ratio ne soit supporté par les navigateurs, les développeurs utilisaient l’astuce du pourcentage padding-bottom :

/* Hack padding legacy */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 0.5625 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Cela fonctionne parce que les pourcentages de padding sont calculés par rapport à la largeur du parent, créant une hauteur basée sur un ratio. Mais cela nécessite des éléments conteneurs, un positionnement absolu et des calculs obscurs.

L’approche moderne est plus propre :

.video-wrapper {
  aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

Utilisez aspect-ratio par défaut. Réservez le hack du padding uniquement si vous devez supporter des navigateurs legacy comme IE.

Aspect-Ratio dans Flexbox et Grid

L’utilisation d’aspect-ratio dans les mises en page flexbox et grid fonctionne, mais les interactions de dimensionnement automatique peuvent produire des résultats inattendus.

Dans CSS Grid, aspect-ratio fonctionne naturellement avec les pistes dimensionnées automatiquement :

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.grid-item {
  aspect-ratio: 1;
}

Chaque élément devient carré, avec une hauteur correspondant à sa largeur déterminée par la grille.

Dans Flexbox, sachez que flex-grow et flex-shrink affectent la largeur calculée, qui détermine ensuite la hauteur via aspect-ratio. Si les éléments s’étirent de manière inattendue, vérifiez vos propriétés flex. Définir une width ou flex-basis explicite sur l’élément donne à aspect-ratio une dimension stable sur laquelle travailler.

Pour les deux systèmes de mise en page, définissez min-height: 0 sur les éléments si le contenu déborde de la hauteur contrainte par aspect-ratio.

Mises en page responsives pratiques avec Aspect-Ratio

Voici un motif courant pour les images de cartes responsives :

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

Et pour les vidéos intégrées :

.embed-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

Ces deux motifs réservent immédiatement l’espace de mise en page, éliminant le décalage cumulatif de mise en page (CLS).

Conclusion

La propriété aspect-ratio définit un ratio préféré utilisé lorsqu’au moins une dimension est automatique. Elle façonne la boîte de l’élément—pas le contenu média—et remplace la technique du padding-hack pour les navigateurs modernes. Lorsque vous travaillez avec des images ou des vidéos, associez-la à object-fit pour contrôler comment le média remplit l’espace. Dans les contextes flexbox et grid, surveillez les interactions de dimensionnement automatique qui peuvent affecter les dimensions calculées.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.