برچسب <picture> HTML
تعریف و استفاده
<picture> برچسب‌ها به توسعه‌دهندگان وب این امکان را می‌دهد که در زمان مشخص کردن منابع تصویر، بیشتر انعطاف‌پذیری داشته باشند.
<picture> یکی از کاربردهای رایج‌ترین عناصر در طراحی پاسخگو (Responsive Design) است. می‌توان چندین تصویر طراحی کرد تا بهتر در视پورت مرورگر پر شود، تا اینکه یک تصویر بر اساس عرض视پورت به تناسب بزرگتر یا کوچکتر شود.
<picture> عناصر دو برچسب را شامل می‌شود: یک یا چند <source> برچسب و یک <img> برچسب.
مرورگر اولین عنصر <source> که با تحقیقات مرتبط با عرض فعلی视پورت مطابقت دارد را پیدا می‌کند، سپس تصویر صحیح (که در ویژگی srcset مشخص شده است) نمایش داده می‌شود. علامت <img> به عنوان <picture> عنصر آخرین فرزند عنصر ضروری است و به عنوان گزینه جایگزین استفاده می‌شود زمانی که هیچ برچسب source با آن مطابقت ندارد.
توجه:<picture> عملکرد عناصر <video> و <audio> مانند. می‌توانید منابع مختلفی را تنظیم کنید، منبع اولی‌که با ترجیح شما مطابقت دارد استفاده خواهد شد.
لطفاً به:
تدریس HTML:عنصر <picture> HTML
تدریس CSS:طراحی واکنش‌گرای CSS - تصاویر
مثال
<picture> روش استفاده از برچسب:
<picture> <source media="(min-width:650px)" srcset="flowers-1.jpg"> <source media="(min-width:465px)" srcset="flowers-2.jpg"> <img src="flowers-3.jpg" alt="Flowers" style="width:auto;"> </picture>
ویژگی‌های جهانی
<picture> این برچسب نیز از ویژگی‌های جهانی در HTML.
ویژگی‌های رویداد
<picture> این برچسب نیز از ویژگی‌های رویداد در HTML.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهای پشتیبان از این برچسب هستند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
