स्लॉट की एक से ज़्यादा चौड़ाई तय करना

Katie Hempenius

यह डेमो आज़माएं

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.

• ब्राउज़र में अलग-अलग साइज़ की विंडो में ऐप्लिकेशन को फिर से लोड करें. इससे आपको ब्राउज़र में अलग-अलग इमेज लोड होने के साथ-साथ, अलग-अलग साइज़ के ब्राउज़र में अलग-अलग लेआउट इस्तेमाल करने की जानकारी मिलेगी.

कोड देखना

• इस सुविधा को चालू करने वाला कोड देखने के लिए, 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 में दी गई इमेज की संख्या से कोई फ़र्क़ नहीं पड़ता.

• स्लॉट की चौड़ाई को कई तरह की इकाइयों का इस्तेमाल करके तय किया जा सकता है. यहां दी गई सभी चौड़ियां मान्य हैं:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

यह चौड़ाई मान्य नहीं है:

• 25% (साइज़ एट्रिब्यूट के साथ प्रतिशत का इस्तेमाल नहीं किया जा सकता)