Vlastnost aspect-ratio

Vlastnost aspect-ratio nastavuje zarovnání elementů podél příčné osy pro flex boxy a podél vodorovné osy pro gridy. Aplikuje se na nadřazený element.

Syntaxe

selektor {
	aspect-ratio: auto nebo poměr;
}

Hodnoty

Hodnota	Popis
`auto`	Element nemá preferovaný poměr stran a prohlížeč jej nastavuje automaticky na základě šířky a výšky elementu.
`poměr`	Poměr se zapisuje ve tvaru `16/9`, kde první číslo je šířka a druhé číslo - výška. Pokud nějaká hodnota není uvedena, považuje se za rovnou `1`. Také některé poměry je přípustné zapisovat jedním číslem. Například `2/1` lze zapsat jako `0.5`, což dá stejný výsledek.
`auto && poměr`	Pokud je poměr stran kombinován s klíčovým slovem `auto` (příklad: `auto` `1/2`), bude zvolen uvedený poměr, ale pro nahrazované elementy (jako jsou obrázky a videa) s vlastním poměrem stran bude použit pouze jejich vlastní poměr.

Příklad

Nastavme tlačítku automatický poměr stran:

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

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

Příklad

A nyní nastavme poměr stran pro tlačítko jako 1/2:

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

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

Viz také

vlastnost object-fit,
která škáluje elementy