مثال ـ نحوي استفاده از تگ<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>
تگ<picture> به توسعه دهندگان وب انعطاف بيشتري براي استفاده ازمنابع تصويري ميدهد.
تگ فوق بعنوان محفظه ايست براي نمايش منابع مختلف تصويري ودستگاهاي مختلف نمايش .با آن ميتوان ميتوان تصوير را براي مورد خاصي ازصفحه نمايش معرفي كرد .اين تگ داراي كاربرد واكنشگرائي براي صفحات وب ميباشد، كه توسعه دهنده ميتواند در اين جهت آنرا بكار بگيرد.
عنصر<picture> دو تگ<source> و <imge> بعنوان عناصر داخلي دربر ميگيرد، كه ميتواند يك يا چند مورد از آنها باشد.
در چنين مواردي مرورگر اولين عنصر<source> كه با دستگاه نمايش تطبيق داشته باشد انتخاب وعكس وبا<img مرتبط را نمايش ميدهد
نكته ـ عنصر<picture> مشابه عناصر <video> , <audio>كار ميكند، باتنظيم چند منبع صوتي ، اولين منبع كه بااولويتها تطبيق دارد انتخاب ومورد استفاده قرار ميگيرد.
اعداد جدول اولين نسخه مرورگر را مشخص ميكند كه بطور كامل ازعنصر پشتيباني ميكند.
Element | |||||
---|---|---|---|---|---|
<picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
تگ<picture> از ويژگي هاي جهانيHTML پيروي ميكند.
تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.