تگ picture در HTML چیست و چه کاربردی این تگ تصویر دارید؟ نحوه استفاده از تگ <picture> چگونه است؟ انعطاف‌پذیری در این تگ به چه صورت است؟ در این مقاله به صورت کامل می‌خواهیم با تگ picture آشنا شویم، بنابراین پیشنهاد میکنم تا پایان این آموزش میزفا را دنبال کنید.
تگ picture
تگ <picture> به توسعه‌‌دهندگان وب انعطاف بیشتری در به کارگیری منابع تصویری ارائه میدهد.
یکی از استفاده‌های رایج تگ <picture> در جهت دیزاین وبسایت برای طراحی واکنش‌گرا است.
به جای آن که یک تصویر برای اندازه‌های متفاوت تغییر مقیاس داده شود، می‌توان از چند تصویر با اندازه‌های تعیین شده برای نمایش استفاده کرد.
تگ <picture> از دو تگ داخلی متفاوت استفاده می کند: اولی تگ <source> با امکان تکرار یک یا چند بار و دومی تگ <img> با امکان تکرار یک بار.
خواص تگ <source>
- خاصیت srcset: این خاصیت اجباری است و تعیین کننده آدرس (URL) تصویر برای نمایش.
- خاصیت media: هر نوع کوئری معتبری که در CSS تعریف شود را قبول میکند.
- خاصیت sizes: امکان تعریف یک توصیفگر پهنای تصویر (width)، یک کوئری مدیا به همراه توصیفگر پهنا و یا لیستی از کوئری های مدیا به همراه توصیفگر پهنای تصویر که با کاما از یک دیگر جدا شده‌اند.
- خاصیت type: یک نوع MIME را مشخص میکند.
مرورگر از مقدار‌های خواص بالا استفاده میکند تا بهترین تصویر را به نسبت اندازه بارگیری کند.
در این حالت مرورگر اولین تگ سورسی که همخوانی داشته باشد را انتخاب و بقیه را رد میکند.
تگ <img> در انتهای تگ picture به عنوان آخرین تگ لازم است قرار داده شود. وظیفه تگ <img> پشتیبانی از مرورگر‌هایی است که قابلیت پشتیبانی از تگ picture را ندارند و یا هیچ تگ <source> تعیین (و یا همخوانی ندارد) نشده است.
تگ <picture> مانند تگ های <video> و <audio> عمل میکند. شما سورس‌های متفاوتی در داخل آن تعیین می کنید، که اولین سورسی که با اولویت‌ها همخوانی داشته باشد توسط مرورگر انتخاب می‌شود.
تگ picture در نسخه HTML5 ارائه شده است. این تگ خواص و رویداد‌های گلوبال HTML را پشتیبانی میکند.
همچنین شما میتوانید اطلاعات بیشتری در رابطه با تگ <img> در مقاله مربوط به آشنایی با تگ <img> پیدا کنید.
<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
در نمونه بالا، ۳ تصویر برای سایز های مختلف انتخاب‌شده است که با تغییر سایز صفحه این تصاویر نیز تغییر می‌کنند و جایگزین تصاویر در دیگر سایز‌ها می‌شوند. توضیح این کد به شرح زیر است:
- در سایز‌های بزرگتر یا برابر ۶۵۰ پیکسل یک تصویر با درختانی با شکوفه‌ها و گل‌های صورتی رنگ مشاهده می‌کنید.
- درسایز‌های کمتر از ۶۵۰ پیکسل و بزرگتر یا برابر ۴۶۵ پیکسل تصویر گل سفید رنگ را مشاهده می‌کنید.
- در سایز‌های کمتر از ۴۶۵ پیکسل نیز شما تصویر Clip Art گل نارنجی رنگ را مشاهده می‌کنید.
برای معرفی شماره ۱ و ۲ از طریق تگ <source> استفاده می‌کنیم و حداقل سایز را با استفاده از خاصیت media مشخص می‌کنیم.
برای مورد ۳ نیز می‌بایست از تگ <img> استفاده کنیم و تصویر مورد نظرمان را وارد کنیم.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
۳ تصویر مختلف برای ۳ سایز مختلف انتخاب کنید و کد آن را برایمان ارسال کنید. (حتما از تگ picture برای اینکار استفاده شود)
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه‌گیری
در این مقاله با تگ <picture> آشنا شدیم و نحوه استفاده از آن را یاد گرفتیم.
اگر اطلاعات بیشتری در رابطه با این تگ دارید میتوانید آن را برای ما در بخش نظرات ارسال کنید.
امیدوارم این مقاله براتون مفید بوده باشه و آموزش‌های بعدی ما رو هم دنبال کنید و همینطور لیست آموزش های HTML را در لینک اشاره شده میتوانید مشاهده کنید.
11 پاسخ
سلام این کد هایی که خودتان نوشته بودید
رو کپی کردم توی مرورگر هیچی نشان نداد دلیلش چی است؟؟
سلام
ادرس عکس اشتباه دادی.
سلام
یه سوالی داشتم ایاخاصیت Srcset در وردرس به طور خوکار فعال است؟
سلام نه
بستگی به قالب هم داره.
جواب:
سلام علی اکبر، درسته ممنونم.
سلام استاد برام سوال بود که به چندتا زبان برنامه نویسی مسلطه هستید اگه می خواستید نظرم رو حذف کنید لطفا جواب سوالم رو به example@gmail.com و موقعی که پروژ گرفتید به چند زبان مسلطه بودید لطفا جواب بدید????????
سلام دانیال.
من وقتی اولین پروژه طراحی وب سایتم رو گرفتم فقط به وردپرس مسلط بودم و اصلا زبان برنامه نویسی خاصی بلد نبودم.
بعد همون پروژه نیازمند به شخصی سازی داشت و من مجبور شدم که فهم درستی از HTML و CSS داشته باشم که رفتم این زبان ها رو (که زبان برنامه نویسی هم نیستند) یاد گرفتم.
آروم آروم خوشم اومد و تصمیم گرفتم ادامه بدم، مثلا یکی از دوستانم نیازمند پلاگین توی وردپرس بود مجبورم کرد برای اون PHP رو یاد بگیرم و پلاگینش رو اوکی کنم.
واقعا بخواهی فکر کنی اول به فکر یادگیری افتادم بعد تصمیم گرفتم که پروژه قبول کنم اصلا اینطوری نیست، خودمو تو چالش قرار دادم و گفتم یا میتونم یا پروژه رو کنسل میکنم و پول رو پس میدم.
البته توی این موارد حتما باید کارفرمات آدم صبوری باشه و شرایط رو براش توضیح بدی، خودت رو الکی توی دردسر نندازی.
همین الانش که دارم برات مینویسم، برای یک پروژه دارم Django یاد میگیرم و همین حین دارم پروژه هم با همین فریمورک اوکی میکنم.
زیاد روی چند تا زبان و چیا خودت رو محدود نکن، یک حداقلی رو برای خودت در نظر بگیر شروع کن، بعدش آروم آروم به دانشت اضافه کن.
سلام ممنونم از سایت خیلی خوبتون
داخل media میتونیم با گذاشتن and ویژگی دوم هم اضافی کنیم مثل
media:(min-width:600px) and (orientation:landscape)
و میتونیم داخل srcset با کذاشتن کاما بینش لینک عکس دوم بذاریم بعدش مثلا بنویسم 2x که یعنی اگر صفحه مانیتور کاربر 2 برابر حالت عادی تراکم پیکسلی داشت عکس دوم نشون بده
سلام
فرض کنید من 3 تا عکس همه با مشخصات 1024*768 پیکسل دارم و میخوام همشو بنویسم و قرار بدم
پس چرا فقط اون عکسی که مشخصاتش تو متن min width:650 px هست ظاهر میشه و بقیه نمیشه
یعنی فقط اولین خط برنامه مون عکش میاد
و درضمن یه راهی هم بگید در مورد اینکه چگونه عکسو جابجا بتونیم بکنیم
سلام ایلیا. تگ min-width به معنی حداقل طول صفحه نمایش هست و اگر شما از صفحه نمایش دسکتاپ استفاده کنی باید هم اینطور بشه.