‎‎عنصر تصاويرHTML <picture> Element -‎

‎عنصرHTML ‎<picture>‎ اجازه ميدهد نمايش دهيد، تصاوير مختلف را براي دستگاهاي ‎مختلف يا نمايشگر با ابعاد مختلف.

‎‎عنصر تصاويراچ تي ام الThe HTML <picture> Element -‎

‎عنصرHTML ‎<picture>‎ به توسعه دهندگان وب امكانات بيشتري براي معرفي منابع ‎تصاوير ميدهد .يعني ميتوان چند تصوير را در يك عنصر‎<pictue>‎ معرفي نمود .

‎تگ‎<picture>‎ شامل يك يا چند عنصر‎<source>‎ كه هر كدام ‎توسط ويژگي ‎srcset‎‎تصويري را معرفي ميكنند .مرورگر ميتواند تصويري را انتحاب كند كه به ‎بهترين شكل ونماي فعلي يا دستگاه مطابقت دارد .اين انتخاب با استفاده از ويژگي ‎media‎‎تشخيص ‎داده ميشود.

‎‎مثال ـ نمايش تصاوير مختلف براي اندازه هاي مختلف صفحه

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg" style="width:auto;">
</picture>

‎دراين مثال هنگاميگه عرض پنجره ديد بيشتراز650 باشد تصوير غذا و بين465 و650 تصوير ماشين و ‎غير اين مورد يعني كمتراز465تصوير دختر نمايش داده ميشود.

‎روند تغيير انداره پنجره نمايش مثال را همراه نمايش تصاوير منتخب مرورگر در لينك زير بهتر درك ‎خواهيدكرد .با كليك در پيوند زير وتغيير اندازه پنجره نمايش آنرا ملاحظه كنيد.

‎ picture element example

‎‎زمان استفاده از عنصر تصاوير

‎‎ 1‎ـ ابعادBandwidth

‎اگر داراي صفحه نمايش يا مانيتور كوچگ هستيد، لازم نيست فايل بزرگ بارگذاري شود، مرورگر اولين ‎تصوير مناسب را پيدامكند ومابقي را ناديده ميگيرد.

‎‎-‎2‎پشتيباني فرمتFormat Support -‎

‎بعضي ازمرورگرها يا دستگاه نمايش ممكن نوع فايل تصويري را پشتيباني نكنند، ميتوان تصاوير ‎با نوع متفاوت معرفي كرد تا مورد قابل پشتيباني انتخاب شود.

‎‎مثال ـ مرورگر از اولين تصويري كه تشخيص ميدهد استفاده ميكند.

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

HTML tutorial آموزش اچ تی ام ال

HTML Forms فرمهای اچ تی ام ال

HTML Graphicsگرافیک اچ تی ام ال

HTML Media رسانه

HTML APIs

HTML References

Sitemap Protocol