एचटीएमएल <चित्र> टैग
उदाहरण
<तस्वीर> टैग का उपयोग कैसे करें:
<picture>
<source media="(min-width:650px)" srcset="img_pink_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>उत्तरदायी डिजाइनों में कला निर्देशन के लिए तत्व का सबसे आम उपयोग होगा। व्यूपोर्ट की चौड़ाई के आधार पर ऊपर या नीचे एक छवि होने के बजाय, ब्राउज़र व्यूपोर्ट को अधिक अच्छी तरह से भरने के लिए कई छवियों को डिज़ाइन किया जा सकता है।
<picture>तत्व में दो टैग होते हैं: एक या अधिक
< स्रोत> टैग और एक <img> टैग।
ब्राउज़र पहले <source> तत्व की तलाश करेगा जहां मीडिया क्वेरी वर्तमान व्यूपोर्ट चौड़ाई से मेल खाती है, और फिर यह उचित छवि प्रदर्शित करेगी (srcset विशेषता में निर्दिष्ट)। तत्व के अंतिम बच्चे के रूप में <img> तत्व की आवश्यकता होती है <picture>, यदि कोई भी स्रोत टैग मेल नहीं खाता है तो फ़ॉलबैक विकल्प के रूप में।
युक्ति:<picture> तत्व <वीडियो> और <ऑडियो> के "समान" कार्य करता है । आपने अलग-अलग स्रोत सेट किए हैं, और प्राथमिकताओं के अनुकूल पहला स्रोत वह है जिसका उपयोग किया जा रहा है।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से तत्व का समर्थन करता है।
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
वैश्विक गुण
<picture>टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<picture>टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
संबंधित पृष्ठ
एचटीएमएल ट्यूटोरियल: एचटीएमएल <चित्र> तत्व
सीएसएस ट्यूटोरियल: सीएसएस उत्तरदायी डिजाइन - छवियां