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

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

Una Kravets

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

आम तौर पर, आसपेक्ट रेशियो को इन डाइमेंशन में दो पूर्णांक और कोलन के तौर पर दिखाया जाता है: चौड़ाई:ऊंचाई या 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 से बदल सकते हैं. सेटिंग width / height के बताए गए अनुपात में aspect-ratio.

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

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

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

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

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

यह सीएसएस ग्रिड और 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 की एक और बड़ी सुविधा यह है कि यह प्लेसमेंट को रोकने के लिए प्लेसहोल्डर स्पेस बना सकती है लेआउट में हुआ बदलाव और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी बेहतर होती है. इस पहले उदाहरण के लिए, Unस्प्लैश जैसे एपीआई से कोई ऐसेट लोड करने पर, लेआउट शिफ़्ट हो जाता है.

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

ऐमी शैम्बलेन और लायनेल की फ़ोटो अनस्प्लैश से होकर गुस्ताव.