تگ picture در HTML
[vc_row][vc_column][vc_column_text]
آموزش تگ picture در HTML
تگ <picture> در HTML چه کاربردی دارد؟
تگ <picture> در HTML به توسعه دهندگان وب انعطاف پذیری بیشتری در تعیین منابع تصویر می دهد.
تگ <picture> تگی است مانند یک قالب یا یک محفظه برای نگهداری یک یا چندین تصویر.
با استفاده از آن میتوان یک یا چندین تصویر را در حالت ها و سایز های مختلف در صفحه وب خود نمایش دهید.
یکی از استفادههای رایج تگ <picture> در جهت دیزاین وبسایت برای طراحی واکنشگرا است.[/vc_column_text][vc_column_text]برای آشنایی بیشتر با تنظیم تصاویر در HTML میتوانید به آموزش زیر مراجعه کنید:[/vc_column_text][vc_btn title=”افزودن و تنظیم تصاویر با HTML” style=”3d” color=”purple” size=”lg” align=”center” link=”url:https%3A%2F%2Fupweb.ir%2F%25D8%25AA%25D9%2586%25D8%25B8%25DB%258C%25D9%2585-%25D8%25AA%25D8%25B5%25D8%25A7%25D9%2588%25DB%258C%25D8%25B1-%25D8%25A8%25D8%25A7-html%2F|target:_blank”][vc_column_text]
تعریف و کاربرد تگ picture در HTML
عنصر <picture> شامل دو تگ داخلی می باشد: یک یا چند تگ <source> و یک تگ <img>
مرورگر اولین عنصر <source> را در تگ <picture> بررسی می کند و در صورت تطابق سایز تصویر را اعمال میکند.
تگ <img> در انتهای تگ picture به عنوان آخرین تگ لازم است قرار داده شود. وظیفه تگ <img> پشتیبانی از مرورگرهایی است که قابلیت پشتیبانی از تگ picture را ندارند و یا هیچ تگ <source> تعیین (و یا همخوانی ندارد) نشده است.
صفت 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 تنظیم است که تصویر غذا را مشاهده می کنید.
[/vc_column_text][vc_column_text]در مثال زیر اندازه صفحه بر روی %110 تنظیم است که تصویر ماشین را مشاهده می کنید.
[/vc_column_text][vc_column_text]
زمان استفاده از تگ picture
<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> |
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][/vc_column][/vc_row]