تعریف و کاربرد تگ 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> | ۳۸٫۰ | ۳۸٫۰ | ۱۳٫۰ | ۹٫۱ | ۲۵٫۰ |