عنصر Picture
عنصر 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>
بعدی را نادیده میگیرد.
منابع آموزشی[ویرایش | ویرایش]