aspect-ratio қасиеті
aspect-ratio қасиеті flex блоктар үшін элементтерді көлденең ось бойынша
және grid-тер үшін көлденең ось бойынша туралауды белгілейді.
Ата-ана элементке қолданылады.
Синтаксис
селектор {
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қасиеті,
ол элементтерді масштабтайды