दिलचस्प पोस्ट
पायथन मुहावरे के समान क्लोज़र क्या है "यदि __name__ == '__main__'"? समानांतरवाद का समर्थन नहीं करते हुए boost.python? सी: एक सिस्टम कमांड चलाने और आउटपुट प्राप्त करें? कार्यक्रम में मूल्य परिवर्तन के साथ कार्ट में उत्पाद जोड़ें सूचीदृश्य में स्क्रॉल करना अक्षम करें किसी एक्सेस डाटाबेस में एक अटैचमेंट फ़ील्ड से फ़ाइलें निकाले जा रहे हैं क्या कोई वास्तविक दुनिया समस्या है, या सिर्फ एक ऐतिहासिक एक पूरक? अपने जार को कुंठित नहीं होने दें कैसे jquery वादा विधि वास्तव में काम करता है? सी ++ में, "_MOVE_H" के बारे में क्या खास है? कोई अनुशंसित जावा प्रोफाइलिंग ट्यूटोरियल? सामग्री लंबाई के आधार पर आकार बदलने के लिए टेपटेरा पायथन में `<>` क्या मतलब है? क्या सभी डेटा एक ही आकार में सभी डेटा प्रकारों के लिए एक प्लेटफॉर्म में इंगित करते हैं? 09 पूर्णांक संख्या का "बहुत बड़ा" क्यों है?

गतिशील चौड़ाई (सीएसएस द्रव लेआउट) के बराबर ऊंचाई

क्या चौड़ाई (अनुपात 1: 1) की समान ऊंचाई निर्धारित करना संभव है?

उदाहरण

+----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ 

सीएसएस

 div { width: 80%; height: same-as-width } 

Solutions Collecting From Web of "गतिशील चौड़ाई (सीएसएस द्रव लेआउट) के बराबर ऊंचाई"

JQuery का उपयोग करके आप यह कर सकते हैं

 var cw = $('.child').width(); $('.child').css({'height':cw+'px'}); 

http://jsfiddle.net/n6DAu/1/ पर काम कर रहे उदाहरण देखें

[अपडेट: हालांकि मैं इस चाल को स्वतंत्र रूप से खोजता हूं, मुझे पता चला है कि थियरी कोब्लेंटज़ ने मुझे इसे मार दिया था। आप एक सूची के अलावा उनके 2009 के लेख पा सकते हैं। जो प्रशंसा का पात्र है, उसकी प्रशंसा करें।]

मुझे पता है यह एक पुराना सवाल है, लेकिन मुझे इसी तरह की समस्या का सामना करना पड़ा जो मैंने सीएसएस के साथ ही हल किया । यहाँ मेरा ब्लॉग पोस्ट है जो समाधान की चर्चा करता है पोस्ट में शामिल एक लाइव उदाहरण है कोड को नीचे पोस्ट किया गया है

HTML:

 <div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div> 

सीएसएस:

 #container { display: inline-block; position: relative; width: 50%; } #dummy { margin-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver /* show me! */ } 
 #container { display: inline-block; position: relative; width: 50%; } #dummy { margin-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver/* show me! */ } 
 <div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div> 

सीएसएस का उपयोग करने का एक तरीका है!

यदि आप अपनी चौड़ाई को मूल कंटेनर के आधार पर सेट करते हैं, तो आप ऊँचाई 0 तक सेट कर सकते हैं और पैडिंग-नीचे प्रतिशत को सेट कर सकते हैं जो वर्तमान चौड़ाई के आधार पर गणना की जाएगी:

 .some_element { position: relative; width: 20%; height: 0; padding-bottom: 20%; } 

यह सभी प्रमुख ब्राउज़रों में अच्छी तरह से काम करता है

यह किसी भी जावास्क्रिप्ट के बिना संभव है 🙂

यह लेख पूरी तरह से इसका वर्णन करता है – http://www.mademyday.de/css-height-equals-width-with-pure-css.html

एचटीएमएल:

 <div class='box'> <div class='content'>Aspect ratio of 1:1</div> </div> 

सीएसएस:

 .box { position: relative; width: 50%; /* desired width */ } .box:before { content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/ } .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* Other ratios - just apply the desired class to the "box" element */ .ratio2_1:before{ padding-top: 50%; } .ratio1_2:before{ padding-top: 200%; } .ratio4_3:before{ padding-top: 75%; } .ratio16_9:before{ padding-top: 56.25%; } 

सरल और सुव्यवस्थित: व्यूपोर्ट की चौड़ाई के अनुसार उत्तरदायी ऊंचाई / चौड़ाई के लिए vw इकाइयों का उपयोग करें।

vw: व्यूपोर्ट की चौड़ाई की 1/100 वीं ( स्रोत एमडीएन )

डेमो

HTML:

 <div></div> 

1: 1 पहलू अनुपात के लिए सीएसएस :

 div{ width:80vw; height:80vw; /* same as width */ } 

इच्छित पहलू अनुपात और तत्व की चौड़ाई के अनुसार ऊंचाई की गणना करने के लिए तालिका

  aspect ratio | multiply width by ----------------------------------- 1:1 | 1 1:3 | 3 4:3 | 0.75 16:9 | 0.5625 

यह तकनीक आपको अनुमति देता है:

  • position:absolute; का उपयोग किए बिना तत्व के अंदर कोई भी सामग्री सम्मिलित करें position:absolute;
  • कोई अनावश्यक HTML मार्कअप (केवल एक तत्व)
  • वीएच इकाइयों का उपयोग करते हुए व्यूपोर्ट की ऊंचाई के अनुसार तत्वों के पहलू अनुपात को अनुकूलित करें
  • आप एक उत्तरदायी वर्ग या अन्य पहलू अनुपात बना सकते हैं जो कि व्यूपोर्ट की ऊंचाई और चौड़ाई के अनुसार व्यूपोर्ट में फिट बैठता है (यह उत्तर देखें: व्यूोर्ट की चौड़ाई और ऊंचाई या इस डेमो के अनुसार उत्तरदायी वर्ग )

ये इकाइयां IE9 द्वारा समर्थित हैं + अधिक जानकारी के लिए canIuse देख सकते हैं

बेहद सरल विधि jsfiddle

एचटीएमएल

 <div id="container"> <div id="element"> some text </div> </div> 

सीएसएस

 #container { width: 50%; /* desired width */ } #element { height: 0; padding-bottom: 100%; } 

पैडिंग ऊपर / तल तकनीक का विस्तार करना, तत्व की ऊँचाई निर्धारित करने के लिए छद्म तत्व का उपयोग करना संभव है। दृश्य और प्रवाह से छद्म तत्व को निकालने के लिए अतिप्रवाह, फ्लोट और नकारात्मक मार्जिन का उपयोग करें

यह आपको अतिरिक्त डिव और / या सीएसएस स्थिति का उपयोग किए बिना बॉक्स के अंदर सामग्री रखने की अनुमति देता है।

 .fixed-ar { overflow: hidden; } .fixed-ar:before { content: ""; float: left; margin-left: -10px; width: 10px; padding-top: 100%; } .fixed-ar-4-3:before { /* 100 * 3 / 4 = 75 */ padding-top: 75%; } .fixed-ar-16-9:before { /* 100 * 9 / 16 = 56.25 */ padding-top: 56.25%; } /* examples */ .fixed-ar { margin: 1em 0; max-width: 400px; color: #999; background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat; background-size: contain; } 
 <div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div> <div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div> 

वास्तव में यह नाथन के उत्तर के लिए एक टिप्पणी के रूप में है, लेकिन मुझे अभी तक ऐसा करने की अनुमति नहीं है …
मैं पहलू अनुपात बनाए रखना चाहता था, भले ही बॉक्स में फिट होने के लिए बहुत कुछ हो। उनका उदाहरण पहलू अनुपात को बदलने, ऊंचाई को बढ़ाता है। मुझे जोड़ना मिला

 overflow: hidden; overflow-x: auto; overflow-y: auto; 

.element में मदद की http://jsfiddle.net/B8FU8/3111/ देखें

चौड़ाई: 80vmin; ऊँचाई: 80 वम्म;

सीएसएस 80% सबसे छोटा दृश्य, ऊंचाई या चौड़ाई है

http://caniuse.com/#feat=viewport-units