تگ picture در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ picture در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

تگ picture چیست؟

تگ picture برای نگهداری و سازماندهی تصاویر به کار می رود. با استفاده از تگ picture می توان نمایش یک یا چند عکس را متناسب با سایز صفحه نمایش مدیریت کرد.

برای افزودن تصویر و سازماندهی آن باید از تگ source کمک گرفت. (حتما مطالعه فرمایید)

این تگ با <picture> شروع شده و با </picture> پایان می یابد.

<picture></picture>

مثال تگ picture

در کد زیر درون تگ picture، دو تگ source و یک تگ img وجود دارد.

در تگ source اول با استفاده از صفت media به مرورگر می گوییم اگر اندازه عرض صفحه نمایش کاربر بزرگتر از 1000 پیکسل بود فایل image1.jpg که درون صفت srcset قرار دارد را نمایش بده.

در تگ source دوم با استفاده از صفت media به مرورگر می گوییم اگر شرط اول برقرار نبود و اندازه عرض صفحه نمایش کاربر بزرگتر از 600 پیکسل و کوچکتر از 1000 پیکسل بود فایل image2.jpg که درون صفت srcset قرار دارد را نمایش بده.

در تگ img در صورتی که هیچکدام از شرط ها برقرار نبود فایل image3.jpg نمایش داده می شود.

کد:

<picture>
  <source media="(min-width: 1000px)" srcset="image1.jpg">
  <source media="(min-width: 600px)" srcset="image2.jpg">
  <img src="image3.jpg">
</picture>

سازگاری با مرورگرها

تگ picture با مرورگرهای زیر سازگار است:

• گوگل کروم نسخه 38 و بالاتر
• فایرفاکس نسخه 38 و بالاتر
• اج نسخه 13 و بالاتر
• اپرا نسخه 25 و بالاتر
• سافاری نسخه 9.1 و بالاتر
• گوگل کروم اندروید نسخه 38 و بالاتر
• فایرفاکس اندروید نسخه 38 و بالاتر
• اپرا اندروید نسخه 25 و بالاتر
• سافاری iOS نسخه 9.3 و بالاتر