पहलू-अनुपात - सीएसएस-ट्रिक्स

सीएसएस संपत्ति aspect-ratioआप बक्से कि आनुपातिक आयाम जहां बनाए रखने के बनाने की सुविधा देता heightहै और widthएक बॉक्स के अनुपात के रूप में स्वचालित रूप से गणना कर रहे हैं। यह थोड़ा गणित-वाई है, लेकिन विचार यह है कि आप इस संपत्ति पर एक मूल्य को दूसरे द्वारा विभाजित कर सकते हैं और गणना मूल्य एक बॉक्स को उस अनुपात में सुनिश्चित करता है।

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioसीएसएस बॉक्स साइज़िंग मॉड्यूल लेवल 4 विनिर्देश में परिभाषित किया गया है, जो वर्तमान में वर्किंग ड्राफ्ट में है। इसका मतलब है कि यह अभी भी प्रगति पर है और इसे बदलने का मौका है। लेकिन क्रोम और फ़ायरफ़ॉक्स के साथ एक प्रयोगात्मक ध्वज के पीछे इसका समर्थन करते हैं, और सफारी प्रौद्योगिकी पूर्वावलोकन 2021 की शुरुआत में इसके लिए समर्थन जोड़ते हैं, ऐसे मजबूत संकेत हैं जो aspect-ratioबहुत अधिक गति प्राप्त कर रहे हैं।

वाक्य - विन्यास

aspect-ratio: auto || ;

सादे अंग्रेजी में: aspect-ratioया तो autoडिफ़ॉल्ट रूप से माना जाता है , या जहां मान के रूप में स्वीकार करता है ।

• प्रारंभिक मूल्य: auto
• इन पर लागू होता है: इनलाइन बॉक्स और आंतरिक रूबी या टेबल बॉक्स को छोड़कर सभी तत्व
• इन्हेरिट किया: नहीं
• प्रतिशत: n / a
• कंप्यूटेड वैल्यू: निर्दिष्ट कीवर्ड या संख्याओं की एक जोड़ी
• एनिमेशन प्रकार: असतत

मूल्यों

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

यह प्रतिस्थापित और गैर-प्रतिस्थापित सामग्री पर काम करता है

यदि आप सोच रहे हैं, "उह, हाँ, क्या ब्राउज़र पहले से ही छवियों पर हमारे लिए ऐसा नहीं करता है?" जवाब है: बिल्कुल । ब्राउज़र छवियों की तरह प्रतिस्थापित सामग्री पर कुछ फैंसी पहलू अनुपात गणना करते हैं। इसलिए, यदि किसी चित्र में 500px की चौड़ाई है, तो ब्राउज़र छवि के आंतरिक या "प्राकृतिक" आयामों को बनाए रखने के लिए अपने CSS लेआउट एल्गोरिदम को फ्लेक्स करता है। aspect-ratioसंपत्ति को प्रभावी ढंग से उन प्राकृतिक आयाम ओवरराइड करने के लिए इस्तेमाल किया जा सकता।

लेकिन गैर-प्रतिस्थापित सामग्री का प्राकृतिक अनुपात नहीं है। हम जो सामान काम करते हैं, वह ज्यादातर डिव जैसा है। तत्व के प्राकृतिक अनुपात को बनाए रखने की कोशिश करने के बजाय, aspect-ratioएक "पसंदीदा" आकार निर्धारित करता है।

अब, युक्ति वर्तमान में नोट करती है कि पुराने CSS विनिर्देश, विशेष रूप से CSS 2.1, में प्रतिस्थापित और गैर-प्रतिस्थापित सामग्री के बीच स्पष्ट अंतर नहीं है। इसका मतलब है कि हम उन्हें स्पष्ट करने में मदद करने के लिए कल्पना में जोड़े गए कुछ अतिरिक्त विशेष मामलों को देख सकते हैं। समय के लिए, हम ब्राउज़रों को बदले और गैर-प्रतिस्थापित पर पसंदीदा पहलू अनुपात की स्थापना के लिए समर्थन को रोल आउट करते हुए देख रहे हैं, जहां प्रयोगात्मक ध्वज के पीछे शुरुआती समर्थन वाले कुछ ब्राउज़र केवल aspect-ratioगैर-प्रतिस्थापित सामग्री के लिए समर्थन कर सकते हैं । निश्चित रूप से ब्राउज़र के समर्थन पर नज़र रखने के लायक है क्योंकि यह विकसित होता है।

यह एक widthया निर्दिष्ट के बिना अपने दम पर काम करता हैheight

तो, हाँ, हम इसे इस तरह से एक तत्व पर छोड़ सकते हैं:

.element ( aspect-ratio: 16 / 9; )

... और तत्व के डिफ़ॉल्ट रूप width: autoसे तत्व के आयामों को निर्धारित करने के लिए किक करता है।

यह बदल जाता है जब widthया heightएक ही तत्व पर होते हैं

मान लीजिए कि हमारे पास a 300pxऔर a की चौड़ाई वाला एक तत्व aspect-ratioहै 3/1।

.element ( aspect-ratio: 3 / 1; width: 300px; )

स्वभाव से, aspect-ratioअपने आप पर तत्व के आयामों की गणना करना चाहता है और ऐसा उस संदर्भ के आधार पर करेगा जहां इसका उपयोग किया जाता है। लेकिन इसमें widthटॉस के साथ , यह तत्व के पहलू अनुपात बॉक्स 300pxकी चौड़ाई के रूप में उपयोग करके गणना करने के लिए पहलू-अनुपात बताता है । नतीजतन, ऐसा लगता है जैसे हम बस लिखे गए हैं:

.element ( height: 100px; width: 300px; )

यह समझ में आता है! याद रखें, जब कोई widthया heightनिर्दिष्ट नहीं है, तो ब्राउज़र मानता है कि वे हैं autoऔर वहां से चले जाते हैं । जब हम स्पष्ट widthऔर heightमूल्य प्रदान करते हैं, तो वे हैं जो उपयोग किए जाते हैं।

इसे कुछ स्थितियों में अनदेखा किया जाता है

यह वह जगह है जहाँ चीजें थोड़ी दिमाग़ी हो जाती हैं क्योंकि ऐसे मामले होते हैं जहाँ aspect-ratioअनदेखी की जाती है या यह गणना अन्य गुणों से प्रभावित होती है। जिसमें शामिल है:

जब दोनों widthऔर heightतत्व पर घोषित किया गया है

हमने अभी देखा कि कैसे widthया तो heightऔर तत्व घोषित करने से गणना प्रभावित होगी aspect-ratio। लेकिन अगर तत्व पहले से ही दोनों एक है widthऔर height, उन के बजाय आदत हो aspect-ratio। इसे ओवरराइड करने के लिए दोनों गुणों की आवश्यकता होती है aspect-ratio; heightया तो widthअकेले स्थापित करने से तत्व का पहलू अनुपात नहीं टूटेगा।

बेनाम: Senes, सही है? यदि गणना में उस मान का उपयोग करने के लिए widthया तो उपयोग किया जाता है, तो यह तार्किक रूप से इस प्रकार है कि दोनों का उपयोग पूरी तरह से पूरी तरह से ओवरराइड करेगा क्योंकि दोनों मान पहले से ही प्रदान और सेट किए गए हैं।heightaspect-ratioaspect-ratio

जब सामग्री अनुपात से बाहर हो जाती है

सीधे शब्दों में कहें, यदि आपके पास पहलू अनुपात वाला एक तत्व है और सामग्री इतनी लंबी है कि यह तत्व को विस्तार करने के लिए मजबूर करता है, तो तत्व का विस्तार होगा। और अगर तत्व का विस्तार होता है, तो इसके आयाम बदलते हैं और इस प्रकार, कोई अधिक पहलू अनुपात नहीं होता है। यही कारण है कि कल्पना का कहना है कि संपत्ति "पसंदीदा" पहलू अनुपात सेट करती है। यह पसंद किया जाता है, लेकिन निर्धारित नहीं है।

पसंद नहीं है कि कैसे काम करता है? min-height: 0;तत्व पर सेट करने से सामग्री को विस्तारित करने के बजाय पसंदीदा पहलू अनुपात को ओवरफ्लो करने की अनुमति मिलेगी।

जब यह min-*और max-*गुणों के लिए "खो देता है"

हम सिर्फ यह देखते हैं कि यह कैसे काम करता है? जब सामग्री बॉक्स के आयामों से अधिक हो जाती है, तो aspect-ratioप्रभावी रूप से चला जाता है क्योंकि बॉक्स सामग्री के साथ फैलता है। हम इसके साथ ओवरराइड कर सकते हैं min-width: 0।

ऐसा इसलिए है क्योंकि सभी min-*और max-*संपत्तियां आमतौर पर बॉक्स मॉडल की गणना पर युद्ध में widthऔर heightवर्चस्व के लिए लड़ती हैं। उदाहरण के लिए:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

परंतु:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

ऐसा इसलिए min-widthहै क्योंकि या तो widthएक विशिष्ट मूल्य से नीचे जाने से रोका जा रहा है, या इसे नजरअंदाज कर दिया गया है, क्योंकि widthइसमें पहले से ही निर्धारित न्यूनतम चौड़ाई से परे तत्व निर्धारित किया गया है। एक ही बात के लिए चला जाता है min-height, max-widthऔर max-height।

यह सब की बात: अगर हम दोनों एक सेट min-*या max-*रूप में एक ही तत्व पर संपत्ति aspect-ratioऔर वे अधिक "जीत" widthया height, तो उन को पार कर जाएगी aspect-ratio। आपको बताया कि यह थोड़ा दिमाग़ी था। ?

ब्राउज़र का समर्थन

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	नहीं न	86 1.2,3	९ ० ४	टीपी 5	नहीं न

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ओपेरा मोबाइल
नहीं न	नहीं न	नहीं न	नहीं न	नहीं न

अधिक जानकारी

1 जुलाई 2020 को अनुच्छेद

`पहलू-अनुपात` पर एक फर्स्ट लुक

सारा कोप