Lastnost aspect-ratio

Lastnost aspect-ratio določa poravnavo elementov vzdolž prečne osi za fleks bloke in po vodoravni osi za mreže. Uporablja se za nadrejeni element.

Sintaksa

cssselektor {
  aspect-ratio: auto ali razmerje;
}

Vrednost	Opis
`auto`	Element nima prednostnega razmerja stranic in brskalnik ga nastavi samodejno, na podlagi širine in višine elementa.
`razmerje`	Razmerje je zapisano v obliki `16/9`, tukaj je prva številka širina, druga številka pa višina. Če kakšna vrednost ni navedena, velja, da je enaka `1`. Prav tako nekatere razmerja lahko zapišemo z eno številko. Na primer, `2/1` lahko zapišemo kot `0.5`, kar bo dalo enak rezultat.
`auto && razmerje`	Če gre razmerje stranic skupaj s ključno besedo `auto` (primer: `auto` `1/2`), bo izbrano navedeno razmerje, vendar bo za nadomeščene elemente (kot so slike in videoposnetki) z lastnim razmerjem uporabljeno le to.

Nastavimo samodejno razmerje stranic za gumb:

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

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

Результат:

Zdaj pa določimo razmerje stranic za gumb kot 1/2:

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

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

Результат: