<picture>
Misol
<picture> tegidan foydalanish:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
<picture> tegi veb-dasturchilarga rasm resurslarini belgilashda ko‘proq moslashuvchanlik beradi.
<picture> elementining eng keng tarqalgan qo‘llanilishi — moslashuvchan dizaynlarda badiiy yo‘naltirish (art direction). Viewport kengligiga qarab kattalashtiriladigan yoki kichiklashtiriladigan bitta rasm o‘rniga brauzer viewport’ini yaxshiroq to‘ldiradigan bir nechta rasm tayyorlash mumkin.
<picture> elementi ikki xil tegni o‘z ichiga oladi: bir yoki bir nechta <source> tegi va bitta <img> tegi.
Brauzer media so‘rovi joriy viewport kengligiga mos keladigan birinchi <source> elementini qidiradi va keyin tegishli rasmni (srcset atributida ko‘rsatilgan) ko‘rsatadi. Hech bir source tegi mos kelmasa, zaxira variant sifatida <img> elementi <picture> elementining oxirgi bolasi bo‘lishi shart.
Maslahat: <picture> elementi <video> va <audio> ga "o‘xshab" ishlaydi. Siz turli manbalarni sozlaysiz va afzalliklarga mos keladigan birinchi manba ishlatiladi.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi raqamlar elementni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Global atributlar
<picture> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<picture> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Tegishli sahifalar
HTML darsligi: HTML <picture> elementi
CSS darsligi: CSS moslashuvchan dizayn — rasmlar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!