Propriété aspect-ratio CSS

Définition et utilisation

aspect-ratio L'attribut vous permet de définir le rapport entre la largeur et la hauteur de l'élément.

Si l'attribut aspect-ratio et width La hauteur sera ajustée en fonction du rapport largeur/hauteur défini.

Pour mieux comprendre aspect-ratio Voir également l'exemple de démonstration.

Astuce :Utilisation dans la mise en page responsive aspect-ratio Cette propriété est utile lorsque la taille de l'élément change souvent et que vous souhaitez maintenir le rapport largeur/hauteur entre la largeur et la hauteur.

Exemple

Exemple 1

Ajouter un rapport largeur/hauteur à l'élément :

div {
  aspect-ratio: 3 / 2;
}

Essayez-le vous-même

Exemple 2

Si la taille de l'élément div doit changer,aspect-ratio Cette propriété est très adaptée à la contrôle du rapport largeur/hauteur des éléments div. Par exemple, dans une bibliothèque d'images, vous souhaitez que les éléments div aient une taille flexible pour s'adapter à tous les appareils, tout en maintenant le rapport largeur/hauteur des images :

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

Essayez-le vous-même

Syntaxe CSS

aspect-ratio: number/number|initial|inherit;

Valeur de l'attribut

Valeur Description
number Le premier nombre spécifie la valeur de largeur dans le rapport d'aspect.
number

Le deuxième nombre spécifie la valeur de hauteur dans le rapport d'aspect.

Optionnel. Si non défini, la valeur par défaut de la hauteur est 1.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Détails techniques

Valeur par défaut : auto
Héritabilité : Non
Création d'animation : Support. Voir également :Propriétés liées à l'animation.
Version : CSS3
Syntaxe JavaScript : object.style.aspectRatio="16/9"

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
88 88 89 15 74

Pages liées

Tutoriel :Module de mise en page en grille CSS

Référence :Propriété Object-fit CSS

Référence :Propriété Object-position CSS