⌘K

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

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

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Příklad

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

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Viz také

BackVlastnost resizeNextVlastnost object-fit