آموزش HTML – تگ picture

تعریف و کاربرد تگ 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>