रिस्पॉन्सिव इमेज को अक्सर srcset
एट्रिब्यूट का इस्तेमाल करके लागू किया जाता है. srcset
एट्रिब्यूट, इमेज फ़ाइल के नामों और उनकी
चौड़ाई या
डेंसिटी डिस्क्रिप्टर की सूची होती है. इस लिस्ट को कॉमा लगाकर अलग किया जाता है. लेआउट शिफ़्ट रोकने के लिए, srcset
का इस्तेमाल करने वाले <img>
और <source>
टैग पर width
और height
एट्रिब्यूट सेट करें.
डेंसिटी डिस्क्रिप्टर का इस्तेमाल करने वाली रिस्पॉन्सिव इमेज के लिए:
src
औरsrcset
में दी गई सभी इमेज का आसपेक्ट रेशियो एक जैसा होना चाहिए.width
औरheight
एट्रिब्यूट को सेट करें, ताकि वे1x
इमेज के डाइमेंशन से मेल खाएं.src
एट्रिब्यूट से,1x
इमेज की जानकारी मिलनी चाहिए.
चौड़ाई डिस्क्रिप्टर का इस्तेमाल करने वाली रिस्पॉन्सिव इमेज के लिए:
src
औरsrcset
में दी गई सभी इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) एक जैसा होना चाहिए.width
औरheight
एट्रिब्यूट को सेट करें, ताकि वे फ़ॉलबैक इमेज के डाइमेंशन से मेल खाएं.- ज़रूरत के मुताबिक इमेज स्टाइल में बदलाव करें: सीएसएस स्टाइलिंग न होने पर, चौड़ाई डिस्क्रिप्टर का इस्तेमाल करने वाली रिस्पॉन्सिव इमेज पर
width
औरheight
सेटिंग की वजह से, इमेज हमेशा एक ही साइज़ में रेंडर होगी, भले हीsrcset
में शामिल की गई इमेज के डाइमेंशन अलग-अलग हों. यह तरीका आपकी पसंद के मुताबिक नहीं है. अपनी इमेज स्टाइल मेंwidth: 100%; height: auto;
याwidth: 100vw; height: auto;
जोड़ने से, आपको मनचाहा विज़ुअल मिल सकता है.
<picture> टैग के लिए:
- सभी
<source>
टैग के लिए,width
औरheight
एट्रिब्यूट सेट करें:width
औरheight
के लिए सही वैल्यू इस बात पर निर्भर करेंगी कि<source>
टैग,srcset
का इस्तेमाल कैसे करता है. (srcset
के साथ काम करने से जुड़ी जानकारी के लिए ऊपर देखें.) - इमेज स्टाइल में बदलाव करें: अगर आपको इमेज की स्टाइल में बदलाव करना है, तो ध्यान रखें कि
<source>
टैग में स्टाइल जोड़ने से कोई असर नहीं पड़ता.<source>
टैग, खाली एलिमेंट होता है. इसके बजाय, आपको इससे जुड़े<img>
टैग को स्टाइल देना होगा. <img>
टैग परwidth
औरheight
एट्रिब्यूट सेट करें: ये वैल्यू, फ़ॉलबैक इमेज के मूल साइज़ से मेल खानी चाहिए.
एचटीएमएल
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>