सीएसएस एस्पेक्ट-रेशियो गुण

परिभाषा और उपयोग

aspect-ratio गुण आपको एलीमेंट के चौड़ाई और ऊंचाई के अनुपात को परिभाषित करने की अनुमति देता है।

यदि इसे सेट किया गया है aspect-ratio और चौड़ाई गुण, ऊंचाई निर्धारित अनुपात के अनुसार समायोजित की जाएगी।

गुण को बेहतर समझने के लिए aspect-ratio गुण के बारे में बेहतर समझने के लिए, प्रदर्शन को देखें。

सूचना:प्रतिक्रियात्मक रेखाचित्र में उपयोग aspect-ratio गुण, जब एलीमेंट के आकार अक्सर बदलता है, तो आप चाहते हैं कि चौड़ाई और ऊंचाई के अनुपात को बनाए रखें।

उदाहरण

उदाहरण 1

एलीमेंट को अनुपात जोड़ें:

div {
  aspect-ratio: 3 / 2;
}

अपने आप प्रयोग करें

उदाहरण 2

यदि div एलीमेंट के आकार को बदलना चाहते हैंaspect-ratio इस गुण विशेष रूप से div एलीमेंट के चौड़ाई और ऊंचाई के अनुपात को नियंत्रित करने के लिए सही है। उदाहरण में，आप चाहते हैं कि div एलीमेंट का आकार सभी उपकरणों के लिए लचीला हो, लेकिन चित्र के चौड़ाई और ऊंचाई के अनुपात को बनाए रखें:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>गली</div>
  <div>गली के पास फूल</div>
  <div>हिमालय</div>
  <div>Cinque Terre</div>
</div>

अपने आप प्रयोग करें

CSS व्याकरण

aspect-ratio: number/number|initial|inherit;

गुण मान

मान वर्णन
number पहला नंबर विस्तृति के अनुपात में चौड़ाई का मान निर्दिष्ट करता है।
number

दूसरा नंबर विस्तृति के अनुपात में ऊंचाई का मान निर्दिष्ट करता है।

वैकल्पिक। यदि इसे सेट नहीं किया गया है, ऊंचाई का मूलभूत मान 1 है।
initial इस गुण को उसके मूलभूत मान पर सेट करें। देखें initial।
inherit इस गुण को उसके पिता एलीमेंट से विरासत करें। देखें inherit।

तकनीकी विवरण

मूलभूत मान: auto
विरासत की योग्यता: नहीं
एनीमेशन निर्माण: समर्थन करता है। देखें:एनीमेशन संबंधी गुण।
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.aspectRatio="16/9"

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

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण के रूप में प्रदर्शित हैं।

क्रोम एज फायरफॉक्स सफारी ऑपेरा
88 88 89 15 74

संबंधित पृष्ठ

तालीमी दस्तावेज़:CSS ग्रिड लेआउट मॉड्यूल

संदर्भ:CSS Object-fit प्रभाव

संदर्भ:CSS Object-position प्रभाव