aspect-ratio
Définit le rapport entre la largeur et la hauteur d’un élément.
- Valeur initiale
auto- Héritée
- Non
- S’applique à
- tous les éléments sauf les éléments en ligne non remplacés et les éléments internes des tableaux
- JavaScript
element.style.aspectRatio = "16 / 9"
Exemple
#.thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}<img class="thumbnail" src="/collections/covers/gry-do-nauki-programowania.webp" alt="" style="max-width: 360px; display: block;">Définition et utilisation
#La propriété aspect-ratio permet de donner à un élément des proportions fixes, par exemple 16 / 9 pour une vidéo ou 1 / 1 pour un avatar carré. Il suffit de définir une seule dimension, le navigateur calcule l’autre lui-même.
Avant l’arrivée de cette propriété dans les navigateurs, on obtenait des proportions grâce à une astuce avec un padding en pourcentage. Aujourd’hui, une seule ligne lisible suffit.
Si vous définissez explicitement les deux dimensions, aspect-ratio est ignorée. Un contenu qui ne tient pas dans la hauteur calculée peut aussi forcer l’élément à s’agrandir, sauf si vous ajoutez un overflow autre que visible, ou min-height: 0.
Syntaxe
#aspect-ratio: auto | <largeur> / <hauteur>;Valeurs
#Valeurs en pratique
#auto
.demo { aspect-ratio: auto; }1 / 1
.demo { aspect-ratio: 1 / 1; }16 / 9
.demo { aspect-ratio: 16 / 9; }3 / 4
.demo { aspect-ratio: 3 / 4; }Compatibilité des navigateurs
#Largement disponible · depuis 2021
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Associez
aspect-ratioàobject-fit: coverpour que des photos aux proportions différentes paraissent uniformes dans une grille. - Définissez à l’avance les proportions d’un emplacement pour une vidéo ou une publicité, et la page ne sautera plus pendant le chargement.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.