Propriété aspect-ratio

La propriété aspect-ratio définit l'alignement des éléments le long de l'axe transversal pour les blocs flex et le long de l'axe horizontal pour les grilles. S'applique à l'élément parent.

Syntaxe

sélecteur {
	aspect-ratio: auto ou ratio;
}

Valeurs

Valeur	Description
`auto`	L'élément n'a pas de rapport de format préféré et le navigateur le définit automatiquement, en se basant sur la largeur et la hauteur de l'élément.
`ratio`	Le rapport est écrit sous la forme `16/9`, ici le premier nombre est la largeur, et le deuxième nombre - la hauteur. Si une valeur n'est pas spécifiée, elle est considérée comme égale à `1`. Également, certains rapports peuvent être écrits avec un seul nombre. Par exemple, `2/1` peut être écrit comme `0.5`, cela donnera le même résultat.
`auto && ratio`	Si le rapport de format est accompagné du mot-clé `auto` (exemple : `auto` `1/2`), alors le rapport spécifié sera choisi, mais pour les éléments remplacés (tels que les images et les vidéos) avec leur propre rapport de format, seul ce dernier sera utilisé.

Exemple

Définissons un rapport de format automatique pour le bouton :

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

Exemple

Maintenant, définissons le rapport de format pour le bouton comme 1/2 :

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}

Voir aussi

la propriété object-fit,
qui met à l'échelle les éléments