Tomonlar nisbati (aspect ratio)
CSS yordamida elementning tomonlar nisbatini saqlashni o‘rganing.
Tomonlar nisbati (aspect ratio)
O‘lchami o‘zgartirilganda tomonlar nisbatini (4:3, 16:9 va h.k.) saqlaydigan moslashuvchan elementlar yarating:
Tomonlar nisbati nima?
Elementning tomonlar nisbati uning kengligi va balandligi o‘rtasidagi proporsional munosabatni ifodalaydi. Keng tarqalgan ikkita video tomonlar nisbati — 4:3 (XX asrning universal video formati) va 16:9 (HD televideniye va Yevropa raqamli televideniyesi uchun universal, YouTube videolari uchun esa standart).
Qanday qilinadi — Balandlik kenglikka teng
1-qadam) HTML qo‘shing:
<div> kabi konteyner elementidan foydalaning; agar uning ichida matn bo‘lishini istasangiz, ichki (child) element qo‘shing:
Misol
<div class="container">
<div class="text">Some text</div> <!-- If you want text inside the container -->
</div>
2-qadam) CSS qo‘shing:
DIV’ning tomonlar nisbatini saqlash uchun padding-top ga foizli qiymat bering. Quyidagi misol 1:1 tomonlar nisbatini yaratadi (balandlik va kenglik doimo teng):
1:1 tomonlar nisbatiga misol
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
}
/* If you want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
O‘zingiz sinab ko‘ring »
Boshqa tomonlar nisbatlari:
16:9 tomonlar nisbatiga misol
.container {
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
O‘zingiz sinab ko‘ring »
4:3 tomonlar nisbatiga misol
.container {
padding-top: 75%; /* 4:3 Aspect Ratio (divide 3 by 4 = 0.75) */
}
O‘zingiz sinab ko‘ring »
3:2 tomonlar nisbatiga misol
.container {
padding-top: 66.66%; /* 3:2 Aspect Ratio (divide 2 by 3 = 0.6666) */
}
O‘zingiz sinab ko‘ring »
8:5 tomonlar nisbatiga misol
.container {
padding-top: 62.5%; /* 8:5 Aspect Ratio (divide 5 by 8 = 0.625) */
}
O‘zingiz sinab ko‘ring »
aspect-ratio CSS xususiyati
Yangiroq brauzerlarda shunchaki CSS aspect-ratio xususiyatidan foydalanishingiz mumkin:
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| aspect-ratio | 88 | 88 | 89 | 15 | 74 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!