Уласцівасць aspect-ratio

Уласцівасць aspect-ratio задае выраўноўванне элементаў уздоўж папярочнай восі для flex блокаў і па гарызантальнай восі для грыдаў. Ужываецца да бацькоўскага элементу.

Сінтаксіс

селектар {
	aspect-ratio: auto ці суадносіны;
}

Значэнні

Значэнне	Апісанне
`auto`	У элемента няма пераважных суадносін бакоў і браўзэр устанаўлівае іх аўтаматычна, зыходзячы з шырыні і вышыні элемента.
`суадносіны`	Суадносіны запісваюцца ў выглядзе `16/9`, тут першае лік - гэта шырыня, а другое лік - вышыня. Калі якое-небудзь значэнне не ўказана, то яно лічыцца роўным `1`. Таксама некаторыя суадносіны дапушчальна запісваць адным лікам. Напрыклад, `2/1` можна запісаць як `0.5`, гэта дасца аднолькавы вынік.
`auto && суадносіны`	Калі суадносіны бакоў ідзе разам з ключавым словам `auto` (прыклад: `auto` `1/2`), то будзе выбрана пазначанае суадносіны, але для элементаў, што замяняюцца (такіх як выявы і відэа) з уласнымі суадносінамі будзе выкарыстана толькі яно.

Прыклад

Давайце ўсталюем для кнопкі аўтаматычныя суадносіны бакоў:

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

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

Прыклад

А цяпер давайце задамо суадносіны бакоў для кнопкі як 1/2:

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

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

Глядзіце таксама

уласцівасць object-fit,
якое маштабуе элементы