تگ <picture> در HTML چه کاربردی دارد؟
تگ <picture> در HTML به توسعه دهندگان وب انعطاف پذیری بیشتری در تعیین منابع تصویر می دهد.
تگ <picture> تگی است مانند یک قالب یا یک محفظه برای نگهداری یک یا چندین تصویر.
با استفاده از آن میتوان یک یا چندین تصویر را در حالت ها و سایز های مختلف در صفحه وب خود نمایش دهید.
یکی از استفاده‌های رایج تگ <picture> در جهت دیزاین وبسایت برای طراحی واکنش‌گرا است.
برای آشنایی بیشتر با تنظیم تصاویر در HTML میتوانید به آموزش زیر مراجعه کنید:
عنصر <picture> شامل دو تگ داخلی می باشد: یک یا چند تگ <source> و یک تگ <img>
مرورگر اولین عنصر <source> را در تگ <picture> بررسی می کند و در صورت تطابق سایز تصویر را اعمال میکند.
تگ <img> در انتهای تگ picture به عنوان آخرین تگ لازم است قرار داده شود. وظیفه تگ <img> پشتیبانی از مرورگر‌هایی است که قابلیت پشتیبانی از تگ picture را ندارند و یا هیچ تگ <source> تعیین (و یا همخوانی ندارد) نشده است.
دو ویژگی srcset و media در داخل تگ source قرار دارند:
ویژگی srcset: این خاصیت اجباری است و تعیین کننده آدرس (URL) تصویر برای نمایش.
ویژگی media: حاوی کوئری شما برای چیزهایی مثل ارتفاع ، عرض( هر نوع کوئری معتبری که در CSS تعریف شود ) است
را به همین تگ source که ساختید اضافه کنید.
نمونه:
|
1 2 3 4 5 |
<picture> <source media="(min-width: 650px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_food.jpg"> <source media="(min-width: 465px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_car.jpg"> <img src="https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg"> </picture> |
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h3>لطفا این صفحه را تغییر اندازه دهید</h3> <picture> <source media="(min-width: 650px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_food.jpg"> <source media="(min-width: 465px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_car.jpg"> <img src="https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg"> </picture> </body> </html> |
نتیجه:
1.در مثال زیر اندازه صفحه بر روی %100 تنظیم است که تصویر غذا را مشاهده می کنید.
در مثال زیر اندازه صفحه بر روی %110 تنظیم است که تصویر ماشین را مشاهده می کنید.
<picture> وجود دارد:source> برای مطابقت با ویژگی استفاده می کند و بقیه تصاویر را نادیده می گیرد.<picture> ، می توانید تصاویری از همه فرمت ها را اضافه کنید و مرورگر از اولین فرمت مورد استفاده خود استفاده می کند و بقیه تصاویر را نادیده می گیرد.|
1 2 3 4 5 |
<picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture> |