Eigenschap aspect-ratio

De eigenschap aspect-ratio bepaalt de uitlijning van elementen langs de dwarsas voor flexblokken en langs de horizontale as voor grids. Wordt toegepast op het bovenliggende element.

Syntaxis

selector {
	aspect-ratio: auto of verhouding;
}

Waarden

Waarde	Beschrijving
`auto`	Het element heeft geen voorkeursbeeldverhouding en de browser stelt deze automatisch in, op basis van de breedte en hoogte van het element.
`verhouding`	De verhouding wordt geschreven als `16/9`, hier is het eerste getal de breedte, en het tweede getal - de hoogte. Als een waarde niet is opgegeven, wordt deze geacht gelijk te zijn aan `1`. Ook sommige verhoudingen mogen worden geschreven met één getal. Bijvoorbeeld, `2/1` kan worden geschreven als `0.5`, dit geeft hetzelfde resultaat.
`auto && verhouding`	Als de beeldverhouding samen gaat met het sleutelwoord `auto` (voorbeeld: `auto` `1/2`), dan wordt de opgegeven verhouding gekozen, maar voor vervangbare elementen (zoals afbeeldingen en video's) met een eigen verhouding wordt alleen die gebruikt.

Voorbeeld

Laten we een automatische beeldverhouding instellen voor de knop:

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

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

Voorbeeld

Laten we nu een beeldverhouding voor de knop instellen als 1/2:

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

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

Zie ook

de eigenschap object-fit,
die elementen schaalt