aspect-ratio қасиеті

aspect-ratio қасиеті flex блоктар үшін элементтерді көлденең ось бойынша және grid-тер үшін көлденең ось бойынша туралауды белгілейді. Ата-ана элементке қолданылады.

Синтаксис

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 қасиеті,
ол элементтерді масштабтайды