Picture elementi
HTML <picture> elementi turli qurilmalar
yoki ekran o‘lchamlari uchun turli rasmlarni ko‘rsatish imkonini beradi.
HTML <picture> elementi
HTML <picture> elementi veb-dasturchilarga rasm
resurslarini belgilashda ko‘proq moslashuvchanlik beradi.
<picture> elementi bir yoki bir nechta
<source> elementlarini o‘z ichiga oladi, har biri srcset
atributi orqali turli rasmlarga ishora qiladi. Shu tarzda brauzer joriy ko‘rinish va/yoki qurilmaga eng mos keladigan rasmni tanlashi mumkin.
Har bir <source> elementida rasm qachon eng mos
tushishini belgilaydigan media atributi bor.
Misol
Turli ekran o‘lchamlari uchun turli rasmlarni ko‘rsating:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
O‘zingiz sinab ko‘ring »
Eslatma: <picture> elementining oxirgi farzand elementi sifatida doim <img> elementini ko‘rsating. <picture> elementini qo‘llab-quvvatlamaydigan brauzerlar yoki hech bir <source> tegi mos kelmagan hollarda <img> elementidan foydalaniladi.
Picture elementidan qachon foydalaniladi
<picture> elementining ikkita asosiy maqsadi bor:
1. O‘tkazish qobiliyati
Agar kichik ekraningiz yoki qurilmangiz bo‘lsa, katta rasm faylini yuklash shart emas. Brauzer atribut qiymatlari mos keladigan birinchi <source> elementidan foydalanadi va undan keyingi elementlarni e’tiborsiz qoldiradi.
2. Formatlarni qo‘llab-quvvatlash
Ba’zi brauzerlar yoki qurilmalar barcha rasm formatlarini qo‘llab-quvvatlamasligi mumkin. <picture> elementidan foydalanib, barcha formatdagi rasmlarni qo‘shishingiz mumkin va brauzer ozi tanib oladigan birinchi formatdan foydalanib, undan keyingi elementlarni e’tiborsiz qoldiradi.
Misol
Brauzer ozi tanib oladigan birinchi rasm formatidan foydalanadi:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
O‘zingiz sinab ko‘ring »
Eslatma: brauzer atribut qiymatlari mos kelgan birinchi <source> elementidan foydalanadi va undan keyingi <source> elementlarini e’tiborsiz qoldiradi.
HTML rasm teglari
| Tag | Tavsif |
|---|---|
| <img> | Rasmni belgilaydi |
| <map> | Rasm xaritasini (image map) belgilaydi |
| <area> | Rasm xaritasi ichidagi bosiladigan sohani belgilaydi |
| <picture> | Bir nechta rasm resurslari uchun konteynerni belgilaydi |
Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!