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

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

المان picture در html



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


به عنوان مثال با استفاده از المان تصویر

المان picture در html

عنصر <picture> در HTML5 انعطاف پذیری بیشتری در تعیین منابع تصویر به توسعه دهندگان وب می دهد.

عنصر <picture> شامل یک یا چند المان <source> است که هر کدام از طریق ویژگی srcset به تصاویر مختلفی اشاره دارند. به این ترتیب مرورگر می تواند تصویری را که برای نمای فعلی و / یا دستگاه متناسب است ، انتخاب کند.

هر المان <source> دارای یک ویژگی رسانه است که زمان مناسب ترین تصویر را تعیین می کند.

مثال

نمایش تصاویر مختلف برای اندازه های مختلف صفحه نمایش:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>
خودتان آزمایش کنید »

توجه:: همیشه یک المان<img>را به عنوان آخرین المان فرزند المان <picture> تعیین کنید. المان <img> توسط مرورگرهایی استفاده می شود که از المان <picture> پشتیبانی نمی کنند یا اگر هیچ یک از برچسب های <source> مطابقت ندارند.


چه زمانی از المان تصویر استفاده کنید

دو المان اصلی برای المان <picture> وجود دارد:

1.پهنای باند

اگر صفحه یا دستگاه کوچکی دارید ، بارگیری یک پرونده تصویر بزرگ ضروری نیست. مرورگر از اولین عنصر <source> با مقادیر ویژگی مطابق استفاده خواهد کرد و هر یک از المان های زیر را نادیده می گیرد.

2. پشتیبانی از قالب

برخی از مرورگرها یا دستگاه ها ممکن است از همه قالب های تصویر پشتیبانی نکنند. با استفاده از عنصر <picture> می توانید تصاویر مربوط به همه قالب ها را اضافه کنید و مرورگر از اولین قالب شناسایی شده استفاده می کند و عناصر زیر را نادیده می گیرد .

مثال

مرورگر از اولین قالب تصویری که تشخیص می دهد استفاده خواهد کرد:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
خودتان آزمایش کنید »

توجه: مرورگر از اولین المان <source> با مقادیر ویژگی مطابق استفاده می کند و المان <source> بقیه را نادیده می گیرد.






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir