‎‎تگ تصويرHTML <picture> Tag -‎

Previous >    <Next  

‎‎مثال ـ نحوي استفاده از تگ‎<picture>

<picture>
  <source media="(min-width:650px)" srcset="img_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture> 

--(go to editor for change code and run)

‎‎تعريف وكاربردDefinition and Usage -‎

‎تگ‎<picture>‎ به توسعه دهندگان وب انعطاف بيشتري براي استفاده ازمنابع تصويري ‎ميدهد.

‎تگ فوق بعنوان محفظه ايست براي نمايش منابع مختلف تصويري ودستگاهاي مختلف نمايش .با آن ميتوان ‎ميتوان تصوير را براي مورد خاصي ازصفحه نمايش معرفي كرد .اين تگ داراي كاربرد واكنشگرائي ‎براي صفحات وب ميباشد، كه توسعه دهنده ميتواند در اين جهت آنرا بكار بگيرد.

‎عنصر‎<picture>‎ دو تگ‎<source>‎ و ‎<imge>‎ ‎بعنوان عناصر داخلي دربر ميگيرد، كه ميتواند يك يا چند مورد از آنها باشد.

‎در چنين مواردي مرورگر اولين عنصر‎<source>‎ كه با دستگاه نمايش تطبيق داشته باشد ‎انتخاب وعكس وبا‎<img‎ مرتبط را نمايش ميدهد

‎نكته ـ عنصر‎<picture>‎ مشابه عناصر ‎<video> , <audio>‎كار ‎ميكند، باتنظيم چند منبع صوتي ، اولين منبع كه بااولويتها تطبيق دارد انتخاب ومورد استفاده ‎قرار ميگيرد.

‎‎پشتيباني مرورگرBrowser Support -‎

‎‎اعداد جدول اولين نسخه مرورگر را مشخص ميكند كه بطور كامل ازعنصر پشتيباني ميكند.

‎Element‎ Chorome Edge Firefox Safari Opera
‎‎<picture>‎‎ ‎‎38.0‎ ‎‎13.0‎ ‎‎38.0‎ ‎‎9.1‎ ‎‎25.0‎

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<picture>‎ از ويژگي هاي جهانيHTML پيروي ميكند.

‎‎ويژگي هاي رويداديEvent Attributes -‎

‎‎تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.

‎مرجع كامل تگهايHTML
‎مرجع كامل ويژگيهايHTML


Previous >    <Next