कैसे आसन संगति बनाएं:

CSS के जरिए एलीमेंट की आसन संगति बनाने का सीखा:

कैसे निकालें - ऊंचाई चौड़ाई से बराबर

पहला कदम - HTML जोड़ें:

कंटेनर एलिमेंट का उपयोग करके, जैसे <div>और अगर आप उसमें टेक्स्ट चाहते हैं, तो एक उप-एलिमेंट जोड़ें:

<div class="container">
  <div class="text">Some text</div> <!-- अगर आप वस्तु के अंदर टेक्स्ट चाहते हैं -->
</div>

दूसरा कदम - CSS जोड़ें:

के लिए padding-top प्रतिशत मान जोड़ें, ताकि DIV का चौड़ाई-ऊंचाई अनुपात बनाया जा सके। नीचे दिए गए उदाहरण में 1:1 चौड़ाई-ऊंचाई अनुपात वाला DIV बनाया जाएगा (ऊंचाई और चौड़ाई सदैव समान होंगी):

उदाहरण - 1:1 चौड़ाई-ऊंचाई अनुपात

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 चौड़ाई-ऊंचाई अनुपात */
  position: relative; /* अगर आप अंदरीण टेक्स्ट चाहते हैं */
}
/* अगर आप वस्तु के अंदर टेक्स्ट चाहते हैं */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

स्वयं आयात में जाइए

अन्य चौड़ाई-ऊंचाई अनुपात

उदाहरण - 16:9 चौड़ाई-ऊंचाई अनुपात

.container {
  padding-top: 56.25%; /* 16:9 चौड़ाई-ऊंचाई अनुपात (9 विभाजित 16 के बीच 0.5625 होता है) */
}

स्वयं आयात में जाइए

उदाहरण - 4:3 चौड़ाई-ऊंचाई अनुपात

.container {
  padding-top: 75%; /* 4:3 चौड़ाई-ऊंचाई अनुपात (3 विभाजित 4 के बीच 0.75 होता है) */
}

स्वयं आयात में जाइए

उदाहरण - 3:2 चौड़ाई-ऊंचाई अनुपात

.container {
  padding-top: 66.66%; /* 3:2 चौड़ाई-ऊंचाई अनुपात (2 विभाजित 3 के बीच 0.6666 होता है) */
}

स्वयं आयात में जाइए

उदाहरण - 8:5 चौड़ाई-ऊंचाई अनुपात

.container {
  padding-top: 62.5%; /* 8:5 चौड़ाई-ऊंचाई अनुपात (5 विभाजित 8 के बीच 0.625 होता है) */
}

स्वयं आयात में जाइए

CSS aspect-ratio प्रतिशत

नए ब्राउज़रों में आपको सरलता से CSS का उपयोग कर सकते हैं aspect-ratio गुण:

उदाहरण - 3:2 चौड़ाई-ऊंचाई अनुपात

.container {
  aspect-ratio: 3 / 2;
}

स्वयं आयात में जाइए

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