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