aspect-ratio गुण

aspect-ratio गुण फ्लेक्स ब्लॉकों के लिए क्रॉस अक्ष के साथ और ग्रिड के लिए क्षैतिज अक्ष के साथ तत्वों का संरेखण निर्धारित करता है। यह मूल तत्व पर लागू होता है।

सिंटैक्स

cssसिलेक्टर {
  aspect-ratio: ऑटो या अनुपात;
}

मान

मान	विवरण
`auto`	तत्व का कोई पसंदीदा पहलू अनुपात नहीं होता है और ब्राउज़र इसे तत्व की चौड़ाई और ऊंचाई के आधार पर स्वचालित रूप से सेट करता है।
`अनुपात`	अनुपात `16/9` के रूप में लिखा जाता है, यहाँ पहली संख्या चौड़ाई है, और दूसरी संख्या ऊंचाई है। यदि कोई मान निर्दिष्ट नहीं है, तो इसे `1` के बराबर माना जाता है। कुछ अनुपातों को एक संख्या से लिखना भी मान्य है। उदाहरण के लिए, `2/1` को `0.5` के रूप में लिखा जा सकता है, इससे समान परिणाम मिलेगा।
`auto && अनुपात`	यदि पहलू अनुपात `auto` कीवर्ड के साथ आता है (उदाहरण: `auto` `1/2`), तो निर्दिष्ट अनुपात चुना जाएगा, लेकिन स्वयं के पहलू अनुपात वाले प्रतिस्थापन योग्य तत्वों (जैसे छवियों और वीडियो) के लिए केवल उसी का उपयोग किया जाएगा।

उदाहरण

आइए बटन के लिए स्वचालित पहलू अनुपात सेट करें:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

उदाहरण

और अब बटन के लिए पहलू अनुपात 1/2 के रूप में सेट करते हैं:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

यह भी देखें

object-fit गुण,
जो तत्वों को स्केल करता है