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