عنصر Picture

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	ویرایشگرها
۴	پایه
۵	عنصرها
۶	ویژگی‌ها
۷	عنوان‌ها
۸	پاراگراف‌ها
۹	استایل‌ها
۱۰	قالب‌بندی
۱۱	نقل‌قول‌ها
۱۲	توضیحات
۱۳	رنگ‌ها RGB HEX HSL
۱۴	CSS
۱۵	لینک‌ها رنگ‌های لینک نشانک‌های لینک
۱۶	تصاویر نقشه‌های تصویری تصاویر پس‌زمینه عنصر Picture
۱۷	جداول
۱۸	لیست‌ها لیست نامرتب لیست مرتب لیست‌های دیگر
۱۹	بلوک‌ها
۲۰	کلاس‌ها
۲۱	شناسه
۲۲	Iframeها
۲۳	جاوا اسکریپت
۲۴	مسیرهای فایل
۲۵	سرصفحه
۲۶	چیدمان‌ها
۲۷	واکنش‌گرا
۲۸	کد کامپیوتری
۲۹	معنایی‌ها
۳۰	راهنمای استایل
۳۱	موجودیت‌ها
۳۲	نماد‌ها
۳۳	ایموجی‌ها
۳۴	مجموعه کاراکترها
۳۵	رمزگذاری URL
۳۶	HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

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

• 

عنصر <picture> در HTML

HTML5 عنصر <picture> را برای ایجاد انعطاف بیشتر هنگام تخصیص منابع تصویر معرفی کرد.

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

هر عنصر <source> ویژگی‌هایی دارد که مشخص می‌کنند چه زمانی تصویر آنها مناسب‌ترین تصویر است.

مثال

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

1 <picture>
2   <source media="(min-width: 650px)" srcset="img_food.jpg">
3   <source media="(min-width: 465px)" srcset="img_car.jpg">
4   <img src="img_girl.jpg">
5 </picture>

مشاهدهٔ نتیجه

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

چه زمانی از عنصر Picture استفاده شود

دو هدف اصلی برای عنصر <picture> وجود دارد:

۱. پهنای باند

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

۲. پشتیبانی از قالب بندی

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

مثال

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

1 <picture>
2   <source srcset="img_avatar.png">
3   <source srcset="img_girl.jpg">
4   <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
5 </picture>

مشاهدهٔ نتیجه

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

صفحهٔ بعد»

«صفحهٔ قبل