آموزش HTML – تگ picture

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/14 | بخش : آموزش HTML

تعریف و کاربرد تگ picture در HTML

تگ <picture> تگی است همانند یک کانتینر (Container) یا یک قالب یا یک محفظه برای نگهداری ۱ یا چندین تصویر (img) ، که با استفاده از آن می توان یک یا چندین تصویر/عکس را در حالت های مختلف در یک صفحه وب به نمایش گذاشت.

معمولا بیشترین استفاده از این تگ برای نمایش ۱ یا چندین تصویر/عکس در حالت واکنش گرایی (ریسپانسیو) یک صفحه وب می باشد، به اینصورت که کاربر بتواند با تغییر اندازه دادن صفحه نمایش تصاویر/عکس های مختلفی را مشاهده نماید.

 

نکات و توضیحات

  • تگ <picture> یک تگ جدید در HTML5 می باشد.
  • اولویت نمایش تصاویر اول با تگ <picture> می باشد، یعنی از ابتدا به هر اندازه که تگ source درون تگ <picture> وجود داشته باشد تصاویر هم نمایش داده می شوند و اولویت آخر با تگ img است.
  • بطور کلی اگر مرورگرها از تگ <picture> پشتیبانی نکنند، محتوای تگ <img> به کاربر نمایش داده خواهد شد.

 

مثال از تگ picture در HTML

در مثال زیر تعریف کردیم که مثلا وقتی اندازه صفحه نمایش کمتر از ۶۵۰ پیکسل شد تصویر (img_1.jpg) را نمایش بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد تصویر (img_2.jpg) را نمایش بده.

<picture>
  <source media="(min-width: 650px)" srcset="https://www.sitekade.com/wp-content/uploads/2020/01/img-1.jpg">
  <source media="(min-width: 465px)" srcset="https://www.sitekade.com/wp-content/uploads/2020/01/img-2.jpg">
  <img src="https://www.sitekade.com/wp-content/uploads/2020/01/img-3.jpg" style="width:auto;">
</picture>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ picture در HTML

Element
<picture> ۳۸٫۰ ۳۸٫۰ ۱۳٫۰ ۹٫۱ ۲۵٫۰