aspect-ratio
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
aspect-ratio xususiyati element kengligi va balandligi orasidagi nisbatni belgilash imkonini beradi.
Agar aspect-ratio va width xususiyatlari o‘rnatilgan bo‘lsa, balandlik belgilangan tomonlar nisbatiga mos ravishda aniqlanadi.
aspect-ratio xususiyatini yaxshiroq tushunish uchun namoyishni ko‘ring.
Maslahat: aspect-ratio xususiyatidan elementlar o‘lchami tez-tez o‘zgaradigan va kenglik bilan balandlik orasidagi nisbatni saqlab qolish kerak bo‘lgan moslashuvchan maketlarda foydalaning.
| Standart qiymat: | auto |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.aspectRatio="16/9" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| aspect-ratio | 88 | 88 | 89 | 15 | 74 |
CSS sintaksisi
aspect-ratio: number/number|initial|inherit;
Xususiyat qiymatlari
| Xususiyat qiymati | Tavsif | Demo |
|---|---|---|
| number | Birinchi son tomonlar nisbatidagi kenglik sonini belgilaydi. | Demo ❯ |
| number | Ikkinchi son tomonlar nisbatidagi balandlik sonini belgilaydi. Ixtiyoriy. Agar o‘rnatilmasa, balandlik soni standart bo‘yicha 1 ga teng. | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Agar div elementlarining o‘lchami o‘zgarib turishi kerak bo‘lsa, aspect-ratio xususiyati ularning tomonlar nisbatini boshqarish uchun qulay. Masalan, rasmlar galereyasida div elementlari barcha qurilmalarda yaxshi ko‘rinishi uchun o‘lchami moslashuvchan bo‘lishini, shu bilan birga rasmlarning kengligi va balandligi orasidagi nisbat saqlanishini xohlaganingizda shunday bo‘ladi:
#container > div {
aspect-ratio: 3/2;
}
Tegishli sahifalar
CSS darsligi: CSS Grid Layout moduli
CSS object-fit xususiyati: CSS Object-fit xususiyati
CSS object-position xususiyati: CSS Object-position xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!