عنصر Picture

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial‏ | تصاویر(تغییرمسیر از عنصر picture در HTML)
پرش به ناوبری پرش به جستجو

عنصر picture امکان نمایش تصاویر در دستگاه‌های مختلف یا با اندازه‌های متفاوت را برای ما فراهم می‌کند.[۱]

عنصر <picture> در HTML

HTML5 عنصر <picture> را برای ایجاد انعطاف بیشتر هنگام تخصیص منابع تصویر معرفی کرد.

عنصر <picture> دارای تعدادی عنصر <source> است، که هریک به منبع‌های تصویر متفاوتی اشاره می‌کنند. با این روش مرورگر می‌تواند مناسب‌ترین تصویر را برای چشم‌انداز و/یا دستگاه کنونی انتخاب کند.

هر عنصر <source> ویژگی‌هایی دارد که مشخص می‌کنند چه زمانی تصویر آنها مناسب‌ترین تصویر است.

مثال

تصاویر مختلف را در صفحه نمایش‌های با سایز متفاوت نمایش می‌دهد:

<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>


مشاهدهٔ نتیجه


نکته: همیشه یک عنصر <img> را بعنوان آخرین عنصر فرزند عنصر <picture> تعیین کنید. عنصر <img> توسط مرورگرهایی استفاده می‌شود که از عنصر <picture> پشتیبانی نمی‌کنند یا زمانیکه هیچ‌یک از تگ‌های <source> مطابقت ندارند.

چه زمانی از عنصر Picture استفاده شود

دو هدف اصلی برای عنصر <picture> وجود دارد:

۱. پهنای باند

اگر یک صفحه نمایش یا دستگاه کوچک دارید، لازم نیست فایل تصویری بزرگی بارگذاری شود. مرورگر اولین عنصر <source> را با مقادیر ویژگی مطابق استفاده می‌کند، و هر یک از عناصر بعدی را نادیده می‌گیرد.

۲. پشتیبانی از قالب بندی

برخی از مرورگرها یا دستگاه‌ها ممکن است از تمام قالب بندی‌های تصویر پشتیبانی نکنند. با استفاده از عنصر <picture> می‌توان تصاویری از همه قالب بندی‌ها اضافه کرد و مرورگر از اولین فرمی که به می‌شناسد استفاده می‌کند و هر یک از موارد بعدی را نادیده می‌گیرد.

مثال

مرورگر از اولین قالب بندی تصویر که می‌شناسد استفاده می‌کند:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>


مشاهدهٔ نتیجه


توجه: مرورگر از اولین عنصر <source> با مقادیر ویژگی مطابق استفاده می‌کند، و عناصر <source> بعدی را نادیده می‌گیرد.



منابع آموزشی