• Kasblar
    • HTML
    CSS
    JavaScript
    PHP
    SQL
    Python
  • Bo'limlar
    • Yangiliklar
    Texnologiyalar
    Maqolalar

    Element

    HTML <picture> elementi bizga turli xil qurilmalar yoki ekran o'lchamlari uchun turli xil rasmlarni  ko'rsatish uchun ishlatiladi.

    HTML <picture> elementi

    HTML  <picture>  elementi veb-saxifalarni yaratish jarayonida  rasm manbalarini ko'rsatishda ko'proq moslashuvchanlikni beradi.

     <picture>  elementida bir nechta   <source>   elementi mavjud. Har bitta  <source>  elementida  alohida rasmlarga ko'rsatgich bo'lib turadi. Agar birinchi turgan <source> elementidagi rasmni brause qo'llab quvvatlamasa keyingi  <source> elementidagi rasmni ko'rsatishga harakat qiladi va xokozo. 

    Har bir  <source>  elementida mediya atributi mavjud, va unda qachon rasm eng mos kelishi ko'rsatiladi.

    Namuna

    <!DOCTYPE html>
<html>
 
 <body>
   	<h1> source namuna </h1>
  	<picture>
  		<source media="(min-width: 650px)" srcset="https://picsum.photos/id/1059/200/300">
  		<source media="(min-width: 465px)" srcset="https://picsum.photos/id/1061/200/300">
   		<img src="https://picsum.photos/id/1063/200/300">
  	</picture>

 </body>

</html>

    Namunada 

    • Ekranni razmeri 650 dan katta bo'lganlar uchun 1-chi rasm ko'rinadi. (min-width: 650px)
    • Ekranni razmeri 465 dan katta bo'lganlar uchun 2-chi rasm ko'rinadi. (min-width: 465px)
    • Ekranni razmeri 465 dan kichik bo'lganlar uchun 3-chi rasm ko'rinadi

    Eslatma: Har doim  <img>  elementini  <source>  elementlaridan keyin qo'ying.  <source>  teglarining hech biri mos kelmasa <img> elementi ishlatiladi. Ya'ni agar <source> elementidagi yozilgan holatlar yoki rasmlar brauser tomonidan qo'llab quvvatlanmasa img da yozilgan rasm ko'rsatiladi.

     

    Picture elementida foydalanish

    <picture> elementidan foydalanishning  ikkita asosiy maqsad mavjud.

    1. Bandwidth (kengligi, yani moslashuvchan)
      Agar sizda kichkina ekran yoki qurilma bo'lsa, katta hajmdagi rasmni yuklash shart emas.
      Brauzerga mos keladigan atribut qiymatlariga ega birinchi <source> elementidan foydalanadi va qolgan elementlarning hech biriga e'tibor bermaydi.
    2. Format Support (to'g'ri keladigan format)
      Ba'zi brauzerlar yoki qurilmalar barcha rasm formatlarini qo'llab-quvvatlamasligi mumkin.
      <picture> elementidan foydalanib, siz barcha formatdagi rasmlarni qo'shishingiz mumkin va brauzer tanigan birinchi formatdan foydalanadi va qolgan  elementlarning hech biriga e'tibor bermaydi.

    Eslatma: Brauzer mos keladigan atribut qiymatlariga ega bo'lgan birinchi  <source>  elementidan foydalanadi va kegingi <source> elementlariga e'tibor bermaydi.