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

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

Сінтаксіс

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

Значэнні

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

Прыклад

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

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

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

Результат:

Прыклад

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

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

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

Результат:

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

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