Omadus aspect-ratio

Omadus aspect-ratio määrab elementide joonduse põikteljel paindlike plokkide jaoks ja horisontaalteljel võrede jaoks. Rakendub vanem- elemendile.

Süntaks

cssvalija {
  aspect-ratio: auto või kuvasuhe;
}

Väärtus	Kirjeldus
`auto`	Elemendil pole eelistatud kuvasuhet ja brauser määrab selle automaatselt, lähtudes elemendi laiusest ja kõrgusest.
`kuvasuhe`	Kuvasuhe kirjutatakse kujul `16/9`, siin esimene number on laius ja teine number - kõrgus. Kui mõni väärtus ei ole määratud, loetakse see võrdseks `1`. Samuti mõned kuvasuhted on lubatud kirjutada ühe numbriga. Näiteks `2/1` saab kirjutada kui `0.5`, see annab sama tulemuse.
`auto && kuvasuhe`	Kui kuvasuhe tuleb koos võtmesõnaga `auto` (näide: `auto` `1/2`), siis valitakse määratud kuvasuhe, kuid asendatavate elementide (nagu pildid ja videod) omade kuvasuhtega kasutatakse ainult seda.

Määrame nupule automaatse kuvasuhte:

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

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

Результат:

Nüüd määrame nupule kuvasuhte kui 1/2:

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

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

Результат: