Pendant des années, imposer un ratio fixe à un conteneur, par exemple pour qu'une vidéo garde toujours la même forme rectangulaire quelle que soit la largeur de l'écran, obligeait à passer par une astuce peu intuitive fondée sur le pourcentage de la propriété padding-top. La propriété aspect-ratio a mis fin à ce détour en donnant au CSS un moyen direct et lisible de dire que ce bloc doit garder telle proportion entre sa largeur et sa hauteur, quoi qu'il arrive.
Cette propriété est particulièrement utile pour les vidéos, les images, les cartes de CSS Grid et tout composant dont la forme doit rester stable pendant que le contenu se charge, ce qui évite au passage les décalages de mise en page qui pénalisent l'expérience utilisateur et les scores de performance.
Définition
aspect-ratio est une propriété CSS qui fixe le rapport entre la largeur et la hauteur d'un élément. Elle prend en général deux nombres séparés par une barre oblique, comme 16/9 pour une vidéo au format large ou 1/1 pour un carré parfait. Une fois cette propriété posée, il suffit de définir une seule dimension, le plus souvent la largeur, pour que le navigateur calcule automatiquement la hauteur correspondante.
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.avatar {
width: 80px;
aspect-ratio: 1 / 1;
border-radius: 50%;
}La technique du padding-top qu'elle remplace
Avant aspect-ratio, la méthode dominante consistait à exploiter une particularité du Dimensionnement CSS : dans un pourcentage, la propriété padding-top se calcule toujours par rapport à la largeur du bloc, jamais par rapport à sa hauteur. En posant un padding-top de 56,25 %, soit 9 divisé par 16, sur un conteneur vide et un élément positionné en absolu par dessus, il était possible de simuler un ratio 16/9 sans jamais l'écrire explicitement.
/* Ancienne astuce, avant aspect-ratio */
.video-wrapper-legacy {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9 / 16 */
}
.video-wrapper-legacy iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Cette technique fonctionnait, mais elle demandait un calcul manuel du pourcentage, un conteneur positionné en absolu, et une lecture du code bien moins directe que la simple ligne aspect-ratio: 16 / 9;. Elle reste utile à connaître pour comprendre du code ancien, mais elle n'a plus lieu d'être écrite dans un projet neuf.
Comment l'utiliser en pratique
La propriété accepte aussi bien deux nombres séparés par une barre oblique qu'un seul nombre décimal, les deux notations étant équivalentes. Elle peut également recevoir la valeur auto, qui laisse le navigateur déterminer le ratio à partir des dimensions intrinsèques du contenu, un comportement particulièrement utile pour les images dont on ne connaît pas toujours les proportions à l'avance.
.card {
aspect-ratio: 4 / 3;
}
.same-ratio {
aspect-ratio: 1.33; /* equivalent a 4 / 3 */
}
img {
aspect-ratio: auto; /* utilise les dimensions naturelles de l'image */
}aspect-ratio et les images
Sur une balise img, aspect-ratio devient particulièrement puissant lorsqu'il est combiné avec object-fit. En posant un ratio fixe et en réglant object-fit: cover, il devient possible d'afficher des images de proportions très différentes dans des cadres tous identiques, sans déformation, ce qui est exactement le comportement recherché dans une grille de miniatures ou une galerie de portraits. Notre formation HTML et CSS construit justement ce genre de grille de miniatures en exercice, pour ancrer ce duo aspect-ratio et object-fit avant de l'utiliser sur un vrai projet.
.thumbnail {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}Le piège du contenu qui dépasse le ratio fixé
aspect-ratio: 1 / 1. Par défaut, aspect-ratio ne coupe rien : le contenu peut déborder du bloc si sa hauteur naturelle est supérieure à la hauteur imposée par le ratio, sauf si une propriété comme overflow: hidden ou min-height vient encadrer ce débordement. Le ratio fixe la forme du conteneur, il ne garantit jamais que le contenu y tiendra.Tableau récapitulatif
| Valeur | Effet |
|---|---|
16 / 9 | Format vidéo large, le plus courant pour les lecteurs vidéo |
1 / 1 | Carré parfait, utile pour les avatars et vignettes |
4 / 3 | Format plus proche du carré, souvent utilisé pour les cartes |
auto | Le navigateur utilise les dimensions intrinsèques du contenu |
Foire aux questions
aspect-ratio fonctionne-t-il sur tous les navigateurs actuels ?Oui, la propriété est prise en charge par toutes les versions récentes de Chrome, Firefox, Safari et Edge depuis plusieurs années, ce qui en fait un remplacement fiable de l'astuce padding-top pour la quasi totalité des projets actuels, y compris ceux qui doivent encore soutenir des navigateurs un peu plus anciens.
aspect-ratio ?Lorsque les trois valeurs sont explicitement définies, la largeur et la hauteur posées directement priment sur le calcul automatique du ratio, qui n'intervient que pour compléter la dimension manquante. Fixer les trois en même temps revient donc généralement à rendre la propriété aspect-ratio inutile, sauf dans certains cas de contrainte combinée avec une Media query.
aspect-ratio à l'intérieur d'une grille CSS ?Oui, et c'est même l'un de ses usages les plus fréquents : à l'intérieur d'une grille où toutes les cellules doivent garder une forme identique quelle que soit la largeur de colonne calculée, aspect-ratio permet d'obtenir des cartes ou des vignettes parfaitement homogènes sans jamais calculer une hauteur en pixels.