यह डेमो आज़माएं
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
.ब्राउज़र लोड होने की स्थिति देखने के लिए, ऐप्लिकेशन को अलग-अलग आकार की ब्राउज़र विंडो में फिर से लोड करें अलग-अलग इमेज और अलग-अलग ब्राउज़र साइज़ के लिए अलग-अलग लेआउट का इस्तेमाल करना चाहिए.
कोड देखें
- यह कोड काम करने वाले कोड के लिए,
index.htmlको देखें:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
यहां क्या चल रहा है?
sizes एट्रिब्यूट की वैल्यू से पता चलता है कि इमेज के डिसप्ले की चौड़ाई इतनी होगी:
"व्यूपोर्ट की चौड़ाई का 100%" 480px तक की चौड़ाई वाले व्यूपोर्ट पर, "व्यूपोर्ट का 50%
चौड़ाई" इसका मतलब है कि स्क्रीन 481–1024 पिक्सल चौड़ी और 1024 पिक्सल से ज़्यादा चौड़ाई वाली स्क्रीन के लिए 800 पिक्सल की है. ये
चौड़ाई, सीएसएस में बताई गई चौड़ाई से मेल खाती हों.
एक से ज़्यादा स्लॉट की चौड़ाई तय करने की सुविधा, इस्तेमाल किए जाने वाले पेज लेआउट के हिसाब से होती है अलग-अलग स्टाइल (यानी, इमेज की चौड़ाई) को अलग-अलग व्यूपोर्ट साइज़ के लिए सेट करें.
एक से ज़्यादा स्लॉट की चौड़ाई तय करने का तरीका
- एक से ज़्यादा स्लॉट की चौड़ाई तय करने के लिए, कॉमा लगाकर अलग की गई सूची का इस्तेमाल करें. सूची का हर आइटम,
आखिरी आइटम को छोड़कर, इसमें मीडिया से जुड़ी स्थिति (जैसे कि
max-widthयाmin-width) और स्लॉट की चौड़ाई. - इस सूची का आखिरी आइटम, स्लॉट की डिफ़ॉल्ट चौड़ाई है. यह डिफ़ॉल्ट है, इसलिए आपको मीडिया के लिए शर्त तय करने की ज़रूरत नहीं है.
- आप जितनी चाहें उतनी चौड़ाई वाले स्लॉट की सूची बना सकते हैं - इसमें मौजूद इमेज की संख्या
srcsetसे कोई फ़र्क़ नहीं पड़ता. स्लॉट की चौड़ाई को कई तरह की इकाइयों का इस्तेमाल करके तय किया जा सकता है. ये सभी मान्य चौड़ाई:
100px33vw20emcalc(50vw-10px)
नीचे दी गई चौड़ाई की जानकारी मान्य नहीं है:
25%(साइज़ एट्रिब्यूट के साथ प्रतिशत का इस्तेमाल नहीं किया जा सकता)