यह डेमो आज़माएं
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - अलग-अलग ब्राउज़र साइज़ का इस्तेमाल करके, ऐप्लिकेशन को फिर से लोड करें. ध्यान दें कि इमेज कितनी अलग-अलग हैं: उनका न सिर्फ़ साइज़ अलग-अलग है, बल्कि उनका काटा-छांटा गया और आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) भी अलग-अलग है.
यहां क्या चल रहा है?
कला की दिशा अलग-अलग डिसप्ले साइज़ पर अलग-अलग इमेज दिखाती है.
रिस्पॉन्सिव इमेज, एक ही इमेज के अलग-अलग साइज़ को लोड करती है. आर्ट डायरेक्शन इसे एक कदम और आगे ले जाता है और डिसप्ले के आधार पर पूरी तरह से अलग-अलग इमेज लोड करता है.
विज़ुअल प्रज़ेंटेशन को बेहतर बनाने के लिए, आर्ट डायरेक्शन का इस्तेमाल करें. उदाहरण के लिए, इस डेमो में इमेज को अलग-अलग तरह से काटने से यह पक्का होता है कि पसंदीदा जगह (फूल) हमेशा विस्तार से दिखाई जाए, भले ही डिसप्ले कुछ भी हो. कला निर्देश के फ़ायदे सिर्फ़ सुंदर होते हैं. इससे रिस्पॉन्सिव इमेज की परफ़ॉर्मेंस पर कोई फ़ायदा नहीं होता.
कोड देखें
- इस डेमो का आर्ट निर्देश कोड देखने के लिए,
index.htmlदेखें.
कोड कैसे काम करता है
कला निर्देश के लिए,
<picture>,
<source>,
और <img> टैग का इस्तेमाल किया जाता है.
तस्वीर
<picture> टैग, शून्य या उससे ज़्यादा <source> टैग और एक <image> टैग के लिए रैपर उपलब्ध कराता है.
सोर्स
<source> टैग, किसी मीडिया संसाधन के बारे में बताता है.
ब्राउज़र, पहले <source> टैग का इस्तेमाल ऐसी मीडिया क्वेरी
के साथ करता है जो 'सही' दिखाता है. अगर कोई भी मीडिया क्वेरी मेल नहीं खाती है, तो ब्राउज़र, <img> में बताई गई इमेज को फिर से लोड करता है.
टैग के बाद डाला जाना चाहिए.
img
<img> टैग की मदद से, यह कोड उन ब्राउज़र पर काम करता है जिन पर <picture> टैग काम नहीं करता.
अगर किसी ब्राउज़र में <picture> टैग काम नहीं करता, तो यह <img> टैग से तय की गई इमेज लोड करता है.