यह डेमो आज़माएं
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें को दबाएं. इसके बाद, फ़ुलस्क्रीन
को दबाएं.अलग-अलग साइज़ की ब्राउज़र विंडो में ऐप्लिकेशन को फिर से लोड करें, ताकि यह देखा जा सके कि ब्राउज़र अलग-अलग इमेज लोड करता है या नहीं. साथ ही, अलग-अलग साइज़ की ब्राउज़र विंडो में अलग-अलग लेआउट का इस्तेमाल करता है या नहीं.
कोड देखना
- इस सुविधा को चालू करने वाले कोड के लिए,
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 एट्रिब्यूट की वैल्यू से यह तय होता है कि इमेज की चौड़ाई कितनी होगी:
480 पिक्सल तक की चौड़ाई वाले व्यूपोर्ट पर "व्यूपोर्ट की चौड़ाई का 100%", 481 से 1,024 पिक्सल तक की चौड़ाई वाली स्क्रीन पर "व्यूपोर्ट की चौड़ाई का 50%", और 1,024 पिक्सल से ज़्यादा चौड़ी स्क्रीन पर 800 पिक्सल. ये चौड़ाई, सीएसएस में बताई गई चौड़ाई से मेल खाती हैं.
एक से ज़्यादा स्लॉट की चौड़ाई तय करने की सुविधा से, ऐसे पेज लेआउट को शामिल किया जा सकता है जो अलग-अलग व्यूपोर्ट साइज़ के लिए, अलग-अलग स्टाइल (यानी कि इमेज की चौड़ाई) का इस्तेमाल करते हैं.
स्लॉट की कई चौड़ाई तय करने का तरीका
- एक से ज़्यादा स्लॉट की चौड़ाई तय करने के लिए, कॉमा लगाकर अलग की गई सूची का इस्तेमाल करें. आखिरी आइटम को छोड़कर, सूची के हर आइटम में एक मीडिया कंडीशन (जैसे,
max-widthयाmin-width) और स्लॉट की चौड़ाई शामिल होती है. - इस सूची का आखिरी आइटम, स्लॉट की डिफ़ॉल्ट चौड़ाई है. यह डिफ़ॉल्ट रूप से लागू होता है. इसलिए, आपको मीडिया की शर्त तय करने की ज़रूरत नहीं है.
- स्लॉट की चौड़ाई की जितनी चाहें उतनी वैल्यू दी जा सकती हैं.
srcsetमें दी गई इमेज की संख्या से कोई फ़र्क़ नहीं पड़ता. स्लॉट की चौड़ाई को कई तरह की इकाइयों का इस्तेमाल करके तय किया जा सकता है. यहां सभी मान्य चौड़ाई दी गई हैं:
100px33vw20emcalc(50vw-10px)
यह चौड़ाई मान्य नहीं है:
25%(साइज़ एट्रिब्यूट के साथ प्रतिशत का इस्तेमाल नहीं किया जा सकता)