Moslashuvchan iframe’lar
CSS yordamida moslashuvchan iframe’lar yaratishni o‘rganing.
Moslashuvchan iframe’lar
O‘lchami o‘zgartirilganda tomonlar nisbatini (4:3, 16:9 va h.k.) saqlaydigan iframe 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, Yevropa raqamli televideniyesi va YouTube videolari uchun universal).
Qanday qilinadi — Moslashuvchan iframe’lar
1-qadam) HTML qo‘shing:
<div> kabi konteyner elementidan foydalaning va iframe’ni uning ichiga joylang:
Misol
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
2-qadam) CSS qo‘shing:
Konteyner DIV’ning tomonlar nisbatini saqlash uchun padding-top ga foizli qiymat bering. Quyidagi misol 16:9 tomonlar nisbatini yaratadi — bu YouTube videolarining standart tomonlar nisbati.
16:9 tomonlar nisbatiga misol
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
O‘zingiz sinab ko‘ring »
Boshqa tomonlar nisbatlari:
4:3 tomonlar nisbatiga misol
.container {
padding-top: 75%; /* 4:3 Aspect Ratio */
}
O‘zingiz sinab ko‘ring »
3:2 tomonlar nisbatiga misol
.container {
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
O‘zingiz sinab ko‘ring »
8:5 tomonlar nisbatiga misol
.container {
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
O‘zingiz sinab ko‘ring »
1:1 tomonlar nisbatiga misol (balandlik va kenglik doimo teng)
.container {
padding-top: 100%; /* 1:1 Aspect Ratio */
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!