تگ picture در HTML

  /  فرانت اند   /  HTML   /  تگ picture در HTML

تگ picture در HTML برای نگهداری چندین تصویر استفاده می شود ، شما می توانید این تصاویر را در حالت ها و سایز های مختلف صفحه وب خود نمایش دهید.

مثال

نحوه استفاده از عنصر <picture> :

<picture>
<source media="(min-width:650px)" srcset="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/img_white_flower.jpg">
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>


تعریف و کاربرد

تگ picture در HTML انعطاف پذیری بیشتری برای مشخص کردن منابع تصاویر در اختیار توسعه دهندگان قرار می دهد.

با استفاده از این عنصر میتوانید تصاویر مختلف را در سایز های مختلف در حالت واکنش گرا ( Responsive ) نمایش دهید.

مثلاً میتوانید وقتی که عرض صفحه 600px هست یک تصویر را نمایش دهید و وقتی عرض صفحه برابر شد با 400px یا کمتر یک تصویر دیگر را نمایش دهید.

عنصر <picture> شامل دو تگ می باشد: از یک یا چند تگ <source> و یک تگ <img> تشکیل می شود.

مرورگر اولین عنصر <source> را در تگ <picture> بررسی می کند و در صورت تطابق سایز تصویر را اعمال میکند اگر سایز های مشخص شده در عناصر <source> هیچ کدام مطابقت نداشته باشد به صورت پیش فرض تصویر درون عنصر <img> به نمایش در می آید.

نکته: عنصر <picture> مشابه تگ های <video> و <audio> می باشد ، که شما منابع مختلفی را تنظیم و تعریف میکنید و در صورتی که تنظیمات متناسب با آن چیزی باشد که شما مشخص کرده اید منبع اعمال می شود.


پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
<picture>38.013.038.09.125.0

خواص عمومی

تگ picture از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ picture از رویداد های عمومی در HTML پشتیبانی میکند.

5/5 - (1 امتیاز)

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر