HTML <picture> टैग

  • पिछला पृष्ठ <param>
  • अगला पृष्ठ <pre>

वर्णन और उपयोग

<picture> टैग वेब डेवलपरों को निर्दिष्ट इमेज रिसोर्स करने के लिए अधिक लचीला बनाते हैं。

<picture> एलिमेंट का सबसे आम उपयोग रिसोन्सिव डिजाइन में कला दिशा है। कई चित्रों को बेहतर तरीके से ब्राउज़र विन्यास को भरने के लिए डिजाइन किया जा सकता है, न कि एक एकल चित्र को विन्यास को अनुसार आकार करके फैलाने या संकुचित करने के लिए।

<picture> एलिमेंट दो टैगों को देखते हैं: एक या अधिक <source> टैग और एक <img> टैग。

ब्राउज़र माध्यम क्वेरी से वर्तमान विन्यास चौड़ाई के साथ मेल खाते पहले <source> एलिमेंट को खोज देगा, और फिर यह srcset अटेब्ल में निर्दिष्ट सही चित्र (दिया गया है) प्रदर्शित करेगा. <img> एलिमेंट के रूप में <picture> एलिमेंट का अंतिम पिछला बच्चा अनिवार्य है, और यह कोई source टैग में मेल नहीं खाता है तो उपयुक्त विकल्प के रूप में इस्तेमाल किया जाएगा。

सूचना :<picture> एलिमेंट के काम करने के तरीका <video> और <audio> समान. आपको विभिन्न स्रोत सेट कर सकते हैं, और पसंदीदा पहले स्रोत इस्तेमाल किया जाएगा。

और देखें :

HTML शिक्षण :HTML <picture> एलीमेंट

CSS शिक्षण :CSS रेस्पोंसिव डिजाइन - इमेज

इंस्टांस

<picture> टैग का इस्तेमाल करने का तरीका:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

अपने आप से प्रयास करें

ग्लोबल प्रोपर्टी

<picture> टैग इसके साथ भी समर्थन करता है HTML में ग्लोबल प्रोपर्टी。

इवेंट प्रोपर्टी

<picture> टैग इसके साथ भी समर्थन करता है HTML में इवेंट प्रोपर्टी。

ब्राउज़र समर्थन

तालिका में नंबर इस टैग को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण का सूचना देता है。

क्रॉम एज फायरफॉक्स सफारी ओपेरा
क्रॉम एज फायरफॉक्स सफारी ओपेरा
38.0 13.0 38.0 9.1 25.0
  • पिछला पृष्ठ <param>
  • अगला पृष्ठ <pre>