दिलचस्प पोस्ट
टेक्स्ट के आधार पर यूआईएलएबल ऊंचाई समायोजित करें जब कोई टैब क्रोम में निष्क्रिय होता है तो मैं सेट इन्टरवॉल भी कैसे काम कर सकता हूं? सी ++ में किसी ऑब्जेक्ट को कैसे सीरियल कर सकते हैं? कुछ वर्गों में यूआईआईटी के बजाय एनएटी का प्रयोग क्यों करता है? आईवी के साथ सार्वजनिक मेवेन रिपॉजिटरी का उपयोग करें Http: // को जोड़ने के लिए कैसे करें यदि यह URL में मौजूद नहीं है? कोणीय 2 – आंतरिक एचटीएमएल स्टाइलिंग एंड्रॉइड में डाक डेटा भेज रहा है कोणीय। मॉड्यूल minification बग सी ++ में, कौन सी श्रेणियां (लैवल्यू, रैवल्यू, एक्सवेल्यू, इत्यादि) वर्ग के प्रकार के अस्थायी वस्तुओं का उत्पादन कर सकते हैं? Google स्प्रैडशीट में ऐप्स स्क्रिप्ट कोड की सुरक्षा कैसे करें? जावास्क्रिप्ट के साथ एक ऑरेंज से ऑब्जेक्ट कैसे निकालूँ? एक प्रकार के बाद एक प्रश्न चिह्न का उद्देश्य क्या है (उदाहरण के लिए: int? MyVariable)? कैसे कोडनाम एक काम करता है? jQuery एनिमेशन – चिकना आकार संक्रमण

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

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

उदाहरण

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

सीएसएस

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

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

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