آموزش HTMLآموزش طراحی سایت

تگ picture در HTML

تگ 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>
نتیجه کد بالا در سایز های مختلف و نمایش انعطاف پذیری

در نمونه بالا، ۳ تصویر برای سایز های مختلف انتخاب‌شده است که با تغییر سایز صفحه این تصاویر نیز تغییر می‌کنند و جایگزین تصاویر در دیگر سایز‌ها می‌شوند. توضیح این کد به شرح زیر است:

  1. در سایز‌های بزرگتر یا برابر ۶۵۰ پیکسل یک تصویر با درختانی با شکوفه‌ها و گل‌های صورتی رنگ مشاهده می‌کنید.
  2. درسایز‌های کمتر از ۶۵۰ پیکسل و بزرگتر یا برابر ۴۶۵ پیکسل تصویر گل سفید رنگ را مشاهده می‌کنید.
  3. در سایز‌های کمتر از ۴۶۵ پیکسل نیز شما تصویر Clip Art گل نارنجی رنگ را مشاهده می‌کنید.

برای معرفی شماره ۱ و ۲ از طریق تگ <source> استفاده می‌کنیم و حداقل سایز را با استفاده از خاصیت media مشخص می‌کنیم.

برای مورد ۳ نیز می‌بایست از تگ <img> استفاده کنیم و تصویر مورد نظرمان را وارد کنیم.

پایانترم

سوال:

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه‌گیری

در این مقاله با تگ <picture> آشنا شدیم و نحوه استفاده از آن را یاد گرفتیم.

اگر اطلاعات بیشتری در رابطه با این تگ دارید می‌توانید آن را برای ما در بخش نظرات ارسال کنید.

امیدوارم این مقاله براتون مفید بوده باشه و آموزش‌های بعدی ما رو هم دنبال کنید و همینطور لیست آموزش های HTML را در لینک اشاره شده میتوانید مشاهده کنید.

علی اسماعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

‫7 دیدگاه ها

  1. سلام استاد برام سوال بود که به چندتا زبان برنامه نویسی مسلطه هستید اگه می خواستید نظرم رو حذف کنید لطفا جواب سوالم رو به [email protected] و موقعی که پروژ گرفتید به چند زبان مسلطه بودید لطفا جواب بدید🙏🙏🙏🙏🙏🙏🙏🙏

    1. سلام دانیال.
      من وقتی اولین پروژه طراحی وب سایتم رو گرفتم فقط به وردپرس مسلط بودم و اصلا زبان برنامه نویسی خاصی بلد نبودم.
      بعد همون پروژه نیازمند به شخصی سازی داشت و من مجبور شدم که فهم درستی از HTML و CSS داشته باشم که رفتم این زبان ها رو (که زبان برنامه نویسی هم نیستند) یاد گرفتم.
      آروم آروم خوشم اومد و تصمیم گرفتم ادامه بدم، مثلا یکی از دوستانم نیازمند پلاگین توی وردپرس بود مجبورم کرد برای اون PHP رو یاد بگیرم و پلاگینش رو اوکی کنم.
      واقعا بخواهی فکر کنی اول به فکر یادگیری افتادم بعد تصمیم گرفتم که پروژه قبول کنم اصلا اینطوری نیست، خودمو تو چالش قرار دادم و گفتم یا میتونم یا پروژه رو کنسل میکنم و پول رو پس میدم.
      البته توی این موارد حتما باید کارفرمات آدم صبوری باشه و شرایط رو براش توضیح بدی، خودت رو الکی توی دردسر نندازی.
      همین الانش که دارم برات مینویسم، برای یک پروژه دارم Django یاد میگیرم و همین حین دارم پروژه هم با همین فریمورک اوکی میکنم.
      زیاد روی چند تا زبان و چیا خودت رو محدود نکن، یک حداقلی رو برای خودت در نظر بگیر شروع کن، بعدش آروم آروم به دانشت اضافه کن.

  2. سلام ممنونم از سایت خیلی خوبتون
    داخل media میتونیم با گذاشتن and ویژگی دوم هم اضافی کنیم مثل
    media:(min-width:600px) and (orientation:landscape)
    و میتونیم داخل srcset با کذاشتن کاما بینش لینک عکس دوم بذاریم بعدش مثلا بنویسم 2x که یعنی اگر صفحه مانیتور کاربر 2 برابر حالت عادی تراکم پیکسلی داشت عکس دوم نشون بده

  3. سلام
    فرض کنید من 3 تا عکس همه با مشخصات 1024*768 پیکسل دارم و میخوام همشو بنویسم و قرار بدم
    پس چرا فقط اون عکسی که مشخصاتش تو متن min width:650 px هست ظاهر میشه و بقیه نمیشه
    یعنی فقط اولین خط برنامه مون عکش میاد
    و درضمن یه راهی هم بگید در مورد اینکه چگونه عکسو جابجا بتونیم بکنیم

    1. سلام ایلیا. تگ min-width به معنی حداقل طول صفحه نمایش هست و اگر شما از صفحه نمایش دسکتاپ استفاده کنی باید هم اینطور بشه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
Share via
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر