यह डेमो आज़माएं
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.ब्राउज़र अलग-अलग चित्र लोड करता हुआ देखने के लिए और विभिन्न ब्राउज़र आकार पर विभिन्न लेआउट का उपयोग करने के लिए अलग-अलग आकार की ब्राउज़र विंडो में ऐप्लिकेशन को फिर से लोड करें.
कोड देखना
- इस सुविधा को चालू करने वाला कोड देखने के लिए,
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%(साइज़ एट्रिब्यूट के साथ प्रतिशत का इस्तेमाल नहीं किया जा सकता)