HTML `<picture>` elementi

HTML <picture> elementi turli qurilmalar yoki ekran o'lchamlari uchun turli rasmlarni ko'rsatishga imkon beradi.

HTML `<picture>` elementi

HTML <picture> elementi veb-dasturchilarga rasm manbalarini ko'rsatishda ko'proq moslashuvchanlik beradi.

<picture> elementi bir yoki bir nechta <source> elementlarini o'z ichiga oladi, har biri srcset atributi orqali turli rasmlarga murojaat qiladi. Shu tarzda brauzer hozirgi ko'rinish va/yoki qurilmaga eng mos rasmni tanlaydi.

Har bir <source> elementida qaysi holatda rasm eng mos kelishini belgilovchi media atributi mavjud.

Misol

Turli ekran o'lchamlari uchun turli rasmlarni ko'rsatish:

html

<picture>
  <source media="(min-width: 650px)" srcset="img_ovqat.jpg">
  <source media="(min-width: 465px)" srcset="img_mashina.jpg">
  <img src="img_qiz.jpg">
</picture>

Eslatma

Har doim <picture> elementining oxirgi bolasi sifatida <img> elementini ko'rsating. <img> elementi <picture> elementini qo'llab-quvvatlamaydigan brauzerlar yoki hech bir <source> tegiga mos kelmaydigan holatlar uchun ishlatiladi.

Picture elementidan qachon foydalaniladi

<picture> elementining ikki asosiy maqsadi bor:

1. Tarmoq trafigi (Bandwidth)

Agar kichik ekran yoki qurilmaga ega bo'lsangiz, katta rasm faylini yuklash shart emas. Brauzer birinchi mos <source> elementini ishlatadi va keyingi elementlarni e'tiborsiz qoldiradi.

2. Formatni qo'llab-quvvatlash

Ba'zi brauzerlar yoki qurilmalar barcha rasm formatlarini qo'llab-quvvatlamasligi mumkin. <picture> elementi yordamida barcha formatdagi rasmlarni qo'shishingiz mumkin, brauzer esa birinchi tan olgan formatni ishlatadi va keyingi elementlarni e'tiborsiz qoldiradi.

Misol

Brauzer birinchi tan olgan rasm formatini ishlatadi:

html

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_qiz.jpg">
  <img src="img_bitlz.gif" alt="Bitlz" style="width:auto;">
</picture>

Eslatma

Brauzer birinchi mos <source> elementini ishlatadi va keyingi <source> elementlarni e'tiborsiz qoldiradi.

HTML rasm teglar

Teg	Tavsifi
`<img>`	Rasmni belgilaydi
`<map>`	Rasm xaritasini belgilaydi
`<area>`	Rasm xaritasida bosiladigan hududni belgilaydi
`<picture>`	Bir nechta rasm manbalari uchun konteynerni belgilaydi

INFO

Barcha mavjud HTML teglar ro'yxati uchun HTML Teglar Ma'lumotnomasi sahifasiga tashrif buyuring.

HTML <picture> elementi ​