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