آموزش طراحی سایتآموزش 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 گل نارنجی رنگ را مشاهده می‌کنید.
اینم بخون، جالبه
تگ img در HTML

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

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

نتیجه‌گیری

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

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

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

تگ picture در HTML
امتیاز 5 از 3 رای
برچسب ها

علی اسمعیلی

سادگی نهایت پیچیدگیست.

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

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

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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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