यह नई आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) सीएसएस प्रॉपर्टी है, जो Chromium, Safari टेक्नोलॉजी प्रीव्यू, और Firefox Nightly में काम करती है

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

Una Kravets

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

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

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

आसपेक्ट रेशियो को बनाए रखने के बारे में कुछ उदाहरण यहां दिए गए हैं:

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

ऑब्जेक्ट फ़िट

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

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

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

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

पुराना हैक: 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 में आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखना

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

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

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

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

padding-top के बजाय aspect-ratio का इस्तेमाल करना ज़्यादा आसान है. साथ ही, पैडिंग प्रॉपर्टी में अपने सामान्य स्कोप से बाहर कुछ करने के लिए, उसे बेहतर नहीं बनाया जाता.

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

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

यह सीएसएस लेआउट मैकेनिज़्म, जैसे कि CSS Grid और Flexbox के साथ भी बहुत अच्छी तरह काम करता है. उन बच्चों की एक सूची बनाएं जिनका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 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;
}

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

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

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

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

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

इमेज एट्रिब्यूट की मदद से भी इमेज का आसपेक्ट रेशियो सेट किया जा सकता है. अगर आपको इमेज के डाइमेंशन के बारे में पहले से पता है, तो इन डाइमेंशन को 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%;
}

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

नतीजा

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

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