تگ picture در HTML
تگ picture در HTML برای نگهداری چندین تصویر استفاده می شود، شما می توانید این تصاویر را در حالت ها و سایز های مختلف صفحه وب خود نمایش دهید.
مثال
نحوه استفاده از عنصر <picture>:
تعریف و کاربرد
تگ picture در HTML انعطاف پذیری بیشتری برای مشخص کردن منابع تصاویر در اختیار توسعه دهندگان قرار می دهد. با استفاده از این عنصر میتوانید تصاویر مختلف را در سایز های مختلف در حالت واکنش گرا (Responsive) نمایش دهید.
مثلاً میتوانید وقتی که عرض صفحه 600px هست یک تصویر را نمایش دهید و وقتی عرض صفحه برابر شد با 400px یا کمتر یک تصویر دیگر را نمایش دهید.
عنصر <picture> شامل دو تگ می باشد: از یک یا چند تگ <source> و یک تگ <img> تشکیل می شود.
مرورگر اولین عنصر <source> را در تگ <picture> بررسی می کند و در صورت تطابق سایز تصویر را اعمال میکند اگر سایز های مشخص شده در عناصر <source> هیچ کدام مطابقت نداشته باشد به صورت پیش فرض تصویر درون عنصر <img> به نمایش در می آید.
نکته: عنصر <picture> مشابه تگ های <video> و <audio> می باشد، که شما منابع مختلفی را تنظیم و تعریف می کنید و در صورتی که تنظیمات متناسب با آن چیزی باشد که شما مشخص کرده اید منبع اعمال می شود.
پشتیبانی مرورگر ها
اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.
| عنصر | |||||
|---|---|---|---|---|---|
<picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
خواص عمومی
تگ picture از خواص عمومی در HTML پشتیبانی می کند.
رویداد های عمومی
تگ picture از رویداد های عمومی در HTML پشتیبانی می کند.
آیا این مطلب برای شما مفید بود ؟
آخرین سؤالات انجمن برای HTML:
پست های مرتبط
