آموزش تگ picture در HTML

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

آموزش تگ picture در HTML

Free-Learn

تگ Picture در HTML

تگ picture تگی است همانند یک کانتینر (Container) یا یک قالب یا یک محفظه برای نگهداری ۱ یا چندین تصویر (img) ، که با استفاده از آن میتوان یک یا چندین تصویر/عکس را در حالت های مختلف در یک صفحه وب به نمایش گذاشت.

معمولا بیشترین استفاده از این تگ برای نمایش ۱ یا چندین تصویر/عکس در حالت واکنش گرایی (ریسپانسیو) یک صفحه وب می باشد، به اینصورت که کاربر بتواند با تغییر اندازه دادن صفحه نمایش تصاویر/عکس های مختلفی را مشاهده نماید.

Free-Learn

مثال از تگ picture در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

لطفا اول بروی دکمه (امتحان کنید) کلیک نمایید سپس در صفحه ای که باز می شود، مرورگر یا خوده آن صفحه را تغییر اندازه دهید تا بتوانید تغییرات را مشاهده نمایید.

در مثال زیر تعریف کردم که مثلا وقتی اندازه صفحه نمایش کمتر از ۶۵۰ پیکسل شد تصویر (img_1.jpg) را نمایش بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد تصویر (img_2.jpg) را نمایش بده.

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ picture در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۳۸٫۰ ۳۸٫۰ ۲۵٫۰ ۹٫۱ ۱۳٫۰

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

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

Free-Learn

نکات و توضیحات

تگ picture یک تگ جدید/اضافه شده در HTML5 می باشد.

اولویت نمایش تصاویر اول با تگ picture می باشد، یعنی از ابتدا به هر اندازه که تگ source درون تگ picture وجود داشته باشد تصاویر هم نمایش داده می شوند و اولویت آخر با تگ img است.

بطور کلی اگر مرورگرها از تگ picture پشتیبانی نکنند، محتوای تگ img به کاربر نمایش داده خواهد شد.

Free-Learn