कैसे करें - पहलू अनुपात
CSS के साथ किसी तत्व के पक्षानुपात को बनाए रखने का तरीका जानें।
आस्पेक्ट अनुपात
लचीले तत्व बनाएं जो आकार बदलने पर उनके पक्षानुपात (4:3, 16:9, आदि) को बनाए रखें:
पहलू अनुपात क्या है?
किसी तत्व का पक्षानुपात उसकी चौड़ाई और ऊँचाई के बीच आनुपातिक संबंध का वर्णन करता है। दो सामान्य वीडियो पक्षानुपात 4:3 (20वीं सदी का सार्वभौमिक वीडियो प्रारूप), और 16:9 (HD टेलीविज़न और यूरोपीय डिजिटल टेलीविज़न के लिए सार्वभौमिक, और YouTube वीडियो के लिए डिफ़ॉल्ट) हैं।
कैसे करें - चौड़ाई के बराबर ऊंचाई
चरण 1) HTML जोड़ें:
कंटेनर तत्व का उपयोग करें, जैसे <div>, और यदि आप इसके अंदर पाठ चाहते हैं, तो एक चाइल्ड तत्व जोड़ें:
उदाहरण
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
चरण 2) सीएसएस जोड़ें:
padding-top
DIV के पक्षानुपात को बनाए रखने के लिए प्रतिशत मान जोड़ें । निम्न उदाहरण 1:1 का पक्षानुपात बनाएगा (ऊंचाई और चौड़ाई हमेशा बराबर होती है):
उदाहरण 1:1 पक्षानुपात
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
अन्य पहलू अनुपात:
उदाहरण 16:9 पक्षानुपात
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
उदाहरण 4:3 पक्षानुपात
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
उदाहरण 3:2 पक्षानुपात
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
उदाहरण 8:5 पक्षानुपात
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}