सीएसएस का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) प्रॉपर्टी

यह सीएसएस प्रॉपर्टी, रिस्पॉन्सिव लेआउट में स्पेसिंग बनाए रखने में मदद करती है.

Una Kravets

ध्यान दें: खास जानकारी: रिस्पॉन्सिव वेब डिज़ाइन में, चौड़ाई और ऊंचाई के अनुपात को एक जैसा रखना ज़रूरी है. इसे आस्पेक्ट रेशियो कहा जाता है. इससे लेआउट में होने वाली गड़बड़ियों को रोकने में मदद मिलती है. अब, Chromium 88, Firefox 87, और Safari Technology Preview 118 में लॉन्च हो रही नई aspect-ratio प्रॉपर्टी की मदद से, इसे आसानी से किया जा सकता है.

आसपेक्ट रेशियो

Browser Support

• 88
• 88
• 89
• 15

Source

आस्पेक्ट रेशियो को आम तौर पर दो पूर्णांकों और डाइमेंशन में कोलन के तौर पर दिखाया जाता है: चौड़ाई:ऊंचाई या x:y. फ़ोटोग्राफ़ी के लिए, सबसे ज़्यादा इस्तेमाल किए जाने वाले आसपेक्ट रेशियो 4:3 और 3:2 हैं. वहीं, वीडियो और हाल ही में लॉन्च हुए उपभोक्ता कैमरों का आसपेक्ट रेशियो 16:9 होता है.

एक ही आसपेक्ट रेशियो वाली दो इमेज. एक इमेज 634 x 951 पिक्सल की है, जबकि दूसरी 200 x 300 पिक्सल की है. दोनों का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 2:3 है.

रिस्पॉन्सिव डिज़ाइन के आने के बाद, वेब डेवलपर के लिए आसपेक्ट रेशियो को बनाए रखना ज़्यादा ज़रूरी हो गया है. ऐसा इसलिए, क्योंकि इमेज के डाइमेंशन अलग-अलग होते हैं और उपलब्ध जगह के आधार पर एलिमेंट के साइज़ में बदलाव होता है.

आस्पेक्ट रेशियो बनाए रखना कहां ज़रूरी हो जाता है, इसके कुछ उदाहरण यहां दिए गए हैं:

• रिस्पॉन्सिव iframe बनाना. इनमें iframe की चौड़ाई, पैरंट की चौड़ाई के 100% के बराबर होती है. साथ ही, ऊंचाई, व्यूपोर्ट के किसी खास अनुपात के हिसाब से होती है
• इमेज, वीडियो, और एम्बेड के लिए इंट्रिंसिक प्लेसहोल्डर कंटेनर बनाना. इससे आइटम लोड होने और जगह लेने पर, लेआउट में बदलाव नहीं होता
• इंटरैक्टिव डेटा विज़ुअलाइज़ेशन या एसवीजी ऐनिमेशन के लिए, एक जैसा और रिस्पॉन्सिव स्पेस बनाना
• कार्ड या कैलेंडर की तारीखों जैसे कई एलिमेंट वाले कॉम्पोनेंट के लिए, एक जैसा और रिस्पॉन्सिव स्पेस बनाना
• अलग-अलग डाइमेंशन वाली कई इमेज के लिए, एक जैसा और रिस्पॉन्सिव स्पेस बनाना. इसका इस्तेमाल object-fit के साथ किया जा सकता है

object-fit

आस्पेक्ट रेशियो तय करने से, हमें रिस्पॉन्सिव कॉन्टेक्स्ट में मीडिया का साइज़ तय करने में मदद मिलती है. इस बकेट में मौजूद एक और टूल, object-fit प्रॉपर्टी है. इसकी मदद से उपयोगकर्ता यह बता सकते हैं कि किसी ब्लॉक में मौजूद ऑब्जेक्ट (जैसे कि इमेज) को उस ब्लॉक में कैसे फ़िट किया जाना चाहिए:

अलग-अलग object-fit वैल्यू दिखाना. Codepen पर डेमो देखें.

initial और fill वैल्यू, इमेज को जगह के हिसाब से फिर से अडजस्ट करती हैं. हमारे उदाहरण में, इससे इमेज धुंधली हो जाती है और पिक्सल फिर से अडजस्ट होने की वजह से, इमेज का साइज़ कम हो जाता है. यह सही नहीं है. object-fit: cover, इमेज की सबसे छोटी डाइमेंशन का इस्तेमाल करके जगह भरता है. साथ ही, इस डाइमेंशन के आधार पर इमेज को काटता है, ताकि वह इसमें फ़िट हो सके. यह सबसे कम सीमा पर "ज़ूम इन" करता है. object-fit: contain यह पक्का करता है कि पूरी इमेज हमेशा दिखे. इसलिए, यह cover के उलट काम करता है. इसमें इमेज का साइज़ सबसे बड़ी सीमा (ऊपर दिए गए उदाहरण में यह चौड़ाई है) के हिसाब से तय होता है. साथ ही, इमेज का साइज़ बदलकर उसके मूल आसपेक्ट रेशियो को बनाए रखा जाता है, ताकि वह स्पेस में फ़िट हो सके. object-fit: none केस में, इमेज को उसके बीच में (ऑब्जेक्ट की डिफ़ॉल्ट पोज़िशन) नैचुरल साइज़ में काटा गया है.

object-fit: cover का इस्तेमाल ज़्यादातर स्थितियों में किया जाता है, ताकि अलग-अलग डाइमेंशन वाली इमेज के साथ काम करते समय एक जैसा इंटरफ़ेस दिखे. हालांकि, इस तरह से इमेज की जानकारी कम हो जाती है. ऐसा इसलिए होता है, क्योंकि इमेज को उसके सबसे लंबे किनारों से काट दिया जाता है.

अगर यह जानकारी ज़रूरी है (उदाहरण के लिए, ब्यूटी प्रॉडक्ट के फ़्लैट ले की इमेज बनाते समय), तो ज़रूरी कॉन्टेंट को काटना स्वीकार नहीं किया जाता. इसलिए, सबसे अच्छा तरीका यह होगा कि अलग-अलग साइज़ की रिस्पॉन्सिव इमेज का इस्तेमाल किया जाए. इससे इमेज को बिना काटे, यूज़र इंटरफ़ेस (यूआई) स्पेस में फ़िट किया जा सकेगा.

पुराना तरीका: padding-top की मदद से आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखना

कैरसेल में पोस्ट की झलक दिखाने वाली इमेज के लिए, 1:1 का आसपेक्ट रेशियो सेट करने के लिए padding-top का इस्तेमाल किया गया है.

इन्हें ज़्यादा रिस्पॉन्सिव बनाने के लिए, हम आसपेक्ट रेशियो का इस्तेमाल कर सकते हैं. इससे हमें किसी खास अनुपात का साइज़ सेट करने और बाकी मीडिया को किसी एक ऐक्सिस (ऊंचाई या चौड़ाई) पर आधारित करने की अनुमति मिलती है.

फ़िलहाल, इमेज की चौड़ाई के आधार पर आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) बनाए रखने के लिए, अलग-अलग ब्राउज़र पर काम करने वाले समाधान को "पैडिंग-टॉप हैक" कहा जाता है. इस समाधान के लिए, पैरंट कंटेनर और पूरी तरह से सेट किए गए चाइल्ड कंटेनर की ज़रूरत होती है. इसके बाद, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को प्रतिशत के तौर पर कैलकुलेट किया जाता है, ताकि इसे padding-top के तौर पर सेट किया जा सके. उदाहरण के लिए:

• आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 1:1 = 1 / 1 = 1 = padding-top: 100%
• 4:3 आसपेक्ट रेशियो = 3 / 4 = 0.75 = padding-top: 75%
• 3:2 आसपेक्ट रेशियो = 2 / 3 = 0.66666 = padding-top: 66.67%
• 16:9 आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) = 9 / 16 = 0.5625 = padding-top: 56.25%

आस्पेक्ट रेशियो की वैल्यू का पता चलने के बाद, हम उसे पैरंट कंटेनर पर लागू कर सकते हैं. नीचे दिए गए उदाहरण पर ध्यान दें:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

इसके बाद, हम यह सीएसएस लिख सकते हैं:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

aspect-ratio एट्रिब्यूट की वैल्यू में आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखना

कैरसेल में पोस्ट की झलक दिखाने वाली इमेज के लिए, 1:1 का आसपेक्ट रेशियो सेट करने के लिए aspect-ratio का इस्तेमाल किया जा रहा है.

माफ़ करें, इन padding-top वैल्यू का हिसाब लगाना आसान नहीं है. इसके लिए, कुछ अतिरिक्त ओवरहेड और पोज़िशनिंग की ज़रूरत होती है. नई इंट्रिंसिक aspect-ratio सीएसएस प्रॉपर्टी की मदद से, आसपेक्ट रेशियो बनाए रखने के लिए इस्तेमाल की जाने वाली भाषा को ज़्यादा आसानी से समझा जा सकता है.

एक ही मार्कअप का इस्तेमाल करके, हम padding-top: 56.25% को aspect-ratio: 16 / 9 से बदल सकते हैं. साथ ही, aspect-ratio को width / height के तय किए गए अनुपात पर सेट कर सकते हैं.

padding-top का इस्तेमाल करना

.container {
  width: 100%;
  padding-top: 56.25%;
}

aspect-ratio प्रॉपर्टी का इस्तेमाल करना

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top के बजाय aspect-ratio का इस्तेमाल करने से, कोड ज़्यादा साफ़ तौर पर समझ में आता है. साथ ही, इससे पैडिंग प्रॉपर्टी में कोई बदलाव नहीं होता.

इस नई प्रॉपर्टी से, आसपेक्ट रेशियो को auto पर सेट करने की सुविधा भी मिलती है. इसमें "जिन एलिमेंट का आसपेक्ट रेशियो पहले से तय होता है वे उसी आसपेक्ट रेशियो का इस्तेमाल करते हैं. अगर ऐसा नहीं होता है, तो बॉक्स का कोई पसंदीदा आसपेक्ट रेशियो नहीं होता." अगर auto और <ratio>, दोनों को एक साथ तय किया जाता है, तो पसंदीदा आसपेक्ट रेशियो, width को height से भाग देने पर मिलने वाला रेशियो होता है. हालांकि, अगर यह इंट्रिंसिक आसपेक्ट रेशियो वाला बदला गया एलिमेंट है, तो उस आसपेक्ट रेशियो का इस्तेमाल किया जाता है.

उदाहरण: ग्रिड में एक जैसा होना

यह सीएसएस लेआउट मैकेनिज़्म के साथ भी बहुत अच्छी तरह से काम करता है. जैसे, सीएसएस ग्रिड और फ़्लेक्सबॉक्स. बच्चों की ऐसी सूची पर विचार करें जिसका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 1:1 रखना है. जैसे, स्पॉन्सर के आइकॉन की ग्रिड:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

ग्रिड में मौजूद इमेज, जिनके पैरंट एलिमेंट अलग-अलग आसपेक्ट रेशियो डाइमेंशन में हैं. Codepen पर डेमो देखें.

उदाहरण: लेआउट शिफ़्ट को रोकना

aspect-ratio की एक और बेहतरीन सुविधा यह है कि यह प्लेसहोल्डर स्पेस बना सकता है, ताकि लेआउट में होने वाले कुल बदलाव को रोका जा सके और बेहतर वेब वाइटल डिलीवर किए जा सकें. इस पहले उदाहरण में, Unsplash जैसे किसी एपीआई से ऐसेट लोड करने पर, मीडिया लोड होने के बाद लेआउट में बदलाव होता है.

लोड की गई ऐसेट पर कोई आसपेक्ट रेशियो सेट न होने पर, लेआउट में होने वाले कुल बदलाव का वीडियो. इस वीडियो को, सिम्युलेट किए गए 3G नेटवर्क से रिकॉर्ड किया गया है.

वहीं, aspect-ratio का इस्तेमाल करने पर, लेआउट शिफ़्ट को रोकने के लिए एक प्लेसहोल्डर बनाया जाता है:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

लोड की गई ऐसेट पर, तय किए गए आसपेक्ट रेशियो वाला वीडियो सेट किया जाता है. इस वीडियो को, सिम्युलेट किए गए 3G नेटवर्क से रिकॉर्ड किया गया है. Codepen पर डेमो देखें.

अहम जानकारी: आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के लिए इमेज एट्रिब्यूट

इमेज का आसपेक्ट रेशियो सेट करने का दूसरा तरीका, इमेज एट्रिब्यूट का इस्तेमाल करना है. अगर आपको इमेज के डाइमेंशन के बारे में पहले से पता है, तो इन डाइमेंशन को इमेज के width और height के तौर पर सेट करना सबसे सही तरीका है.

ऊपर दिए गए उदाहरण में, इमेज के डाइमेंशन 800 पिक्सल x 600 पिक्सल हैं. इसलिए, इमेज का मार्कअप इस तरह दिखेगा: <img src="image.jpg" alt="..." width="800" height="600">. अगर भेजी गई इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) एक जैसा है, लेकिन पिक्सल वैल्यू एक जैसी नहीं है, तो भी हम इमेज एट्रिब्यूट की वैल्यू का इस्तेमाल करके रेशियो सेट कर सकते हैं. इसके साथ ही, width: 100% की स्टाइल का इस्तेमाल करके यह तय किया जा सकता है कि इमेज सही जगह पर दिखे. यह सब एक साथ इस तरह दिखेगा:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

आखिर में, इसका असर वैसा ही होता है जैसा सीएसएस के ज़रिए इमेज पर aspect-ratio सेट करने पर होता है. साथ ही, लेआउट में होने वाले कुल बदलाव से बचा जा सकता है (Codepen पर डेमो देखें).

नतीजा

aspect-ratio सीएसएस प्रॉपर्टी को कई मॉडर्न ब्राउज़र पर लॉन्च किया जा रहा है. इसकी मदद से, मीडिया और लेआउट कंटेनर में सही आसपेक्ट रेशियो बनाए रखना थोड़ा आसान हो जाता है.

Unsplash से ली गई ये फ़ोटो, एमी शैंबलिन और लियोनेल गुस्ताव ने क्लिक की हैं.