aspect-ratio xususiyati

aspect-ratio xususiyati flex-bloklar uchun o'q bo'ylab elementlarning va gridlar uchun gorizontal o'q bo'ylab joylashuvini belgilaydi. U ota-elementga qo'llaniladi.

Sintaksis

cssselector {
  aspect-ratio: auto yoki nisbat;
}

Qiymatlar

Qiymat	Ta'rif
`auto`	Elementning afzal ko'rilgan aspekt nisbati yo'q va brauzer uni avtomatik ravishda elementning eni va bo'yi asosida o'rnatadi.
`nisbat`	Nisbat `16/9` shaklida yoziladi, birinchi raqam eni, ikkinchi raqam esa bo'yini ifodalaydi. Agar qandaydir qiymat ko'rsatilmagan bo'lsa, u `1` ga teng deb hisoblanadi. Shuningdek ba'zi nisbatlarni bitta raqam bilan yozish mumkin. Masalan, `2/1` ni `0.5` sifatida yozish mumkin, bu bir xil natija beradi.
`auto && nisbat`	Agar aspekt nisbati `auto` kalit so'zi bilan birga kelgan bo'lsa (misol: `auto` `1/2`), u holda ko'rsatilgan nisbat tanlanadi, lekin o'z aspekt nisbatiga ega bo'lgan almashtiriladigan elementlar (masalan, rasmlar va videolar) uchun faqat o'z nisbati ishlatiladi.

Misol

Tugma uchun avtomatik aspekt nisbatini o'rnatamiz:

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

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

Результат:

Misol

Endi esa tugma uchun aspekt nisbatini 1/2 deb belgilaymiz:

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

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

Результат:

Shuningdek qarang

object-fit xususiyati,
elementlarni masshtablaydi