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