Savybė aspect-ratio

Savybė aspect-ratio nustato elementų lygiavimą išilgai skersinės ašies flex blokams ir išilgai horizontalios ašies grid'ams. Taikoma tėviniam elementui.

Sintaksė

selektorius {
	aspect-ratio: auto arba santykis;
}

Reikšmės

Reikšmė	Aprašas
`auto`	Elementas neturi pageidaujamo kraštinių santykio ir naršyklė nustato jį automatiškai, remiantis elemento plotis ir aukščiu.
`santykis`	Santykis užrašomas forma `16/9`, čia pirmasis skaičius yra plotis, o antrasis skaičius - aukštis. Jei kuri nors reikšmė ne nurodyta, ji laikoma lygia `1`. Taip pat kai kuriuos santykius leidžiama užrašyti vienu skaičiumi. Pavyzdžiui, `2/1` galima užrašyti kaip `0.5`, tai duos tą patį rezultatą.
`auto && santykis`	Jei kraštinių santykis eina kartu su raktiniu žodžiu `auto` (pavyzdys: `auto` `1/2`), tai bus pasirinktas nurodytas santykis, bet pakeičiamiems elementams (tokius kaip vaizdai ir video) su savo pačių santykiu bus naudojamas tik jis.

Pavyzdys

Nustatykime mygtukui automatinį kraštinių santykį:

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

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

Pavyzdys

O dabar nustatykime mygtuko kraštinių santykį kaip 1/2:

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

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

Taip pat žiūrėkite

savybė object-fit,
kuri mastelioja elementus