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

cssselektor {
  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:

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

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

Результат:

Príklad

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

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

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

Результат:

Pozri tiež

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