Vlastnosť aspect-ratio

Vlastnosť aspect-ratio nastavuje zarovnanie elementov pozdĺž priečnej osi pre flex boxy a pozdĺž horizontálnej osi pre gridy. Aplikuje sa na nadradený element.

Syntax

selektor {
	aspect-ratio: auto alebo pomer;
}

Hodnoty

Hodnota	Popis
`auto`	Element nemá preferovaný pomer strán a prehliadač ho nastavuje automaticky, na základe šírky a výšky elementu.
`pomer`	Pomer sa zapisuje v tvare `16/9`, prvé číslo je šírka, a druhé číslo - výška. Ak niektorá hodnota nie je zadaná, považuje sa za rovnú `1`. Tiež niektoré pomery je prípustné zapisovať jedným číslom. Napríklad, `2/1` je možné zapísať ako `0.5`, čo dá rovnaký výsledok.
`auto && pomer`	Ak pomer strán ide spolu s kľúčovým slovom `auto` (príklad: `auto` `1/2`), bude zvolený zadaný pomer, ale pre nahraditeľné elementy (ako sú obrázky a videá) s vlastným pomerom strán bude použitý iba ich pomer.

Príklad

Nastavme tlačidlu automatický pomer strán:

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

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

Príklad

A teraz nastavme tlačidlu pomer strán ako 1/2:

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

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

Pozri tiež

vlastnosť object-fit,
ktorá škáluje elementy