این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ picture در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ picture در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Picture در HTML
تگ picture تگی است همانند یک کانتینر ( Container ) یا یک ظرف برای نگهداری ۱ یا چندین عکس ، که با استفاده از آن میتوان یک یا چندین عکس رو در اندازه های مختلف صفحه نمایش به نمایش گذاشت.
یعنی مثلا میگیم اگه اندازه صفحه فلان بود، فلان عکسو نشون بده و اگه اندازه صفحه بهمان بود بهمان عکسو نشون بده، همین تموم شد رفت ( اینو بهش میگن واکنش گرایی )
Free-Learn
مثال از تگ picture در HTML
مثال شماره ۱ : استفاده از تگ Picture برای نمایش دادن چندین عکس در اندازه های مختلف صفحه نمایش
در مثال زیر گفتم وقتی اندازه صفحه نمایش بزرگتر از ۶۵۰ پیکسل شد عکس pic-1.jpg رو نشون بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد عکس pic-3.jpg ، و وقتی هم اندازه بین ۴۶۵ تا ۶۵۰ بود عکس pic-2.jpg رو نشون بده.
|
1 2 3 4 5 6 7 8 9 |
<body> <picture> <source media="(min-width: 650px)" srcset="files/pic-1.jpg"> <source media="(min-width: 465px)" srcset="files/pic-2.jpg"> <img src="files/pic-3.jpg"> </picture> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ picture در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ picture از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- برای مشخص کردن چندین عکس در اندازه های مختلف باید از تگ source استفاده کرد.
- مرورگرها اول عکس های داخل تگ source رو نشون میدن ، حالا اگه به هر دلیلی عکس ها نشون داده نشدن، عکس موجود در تگ img نشون داده میشه.
