div की ऊंचाई = इसकी चौड़ाई, प्रतिशत में, ताकि div कंटेनर तत्व (केवल सीएसएस) के गैर-वर्ग आकार के साथ वर्ग की तरह दिखता है

Question

मैंने अपने तत्वों की चौड़ाई और ऊंचाई को प्रतिशत में सेट किया है ताकि वे एक देख सकें बड़ी स्क्रीन पर थोड़ा बड़ा और सामान्य पर सामान्य। मैंने min-height और min-width भी सेट किया है ताकि स्क्रीन पर बहुत कम देखने पर लेआउट विकृत न हो। मैं चाहता हूं कि मेरे तत्वों में से एक वर्ग स्क्वायर के रूप में दिखाई दे, लेकिन मैं इसके लिए सीएसएस-केवल समाधान के साथ आने में असमर्थ हूं।

यहां मैंने कोशिश की है: http://jsfiddle.net/5VTTD/, लेकिन यह काम नहीं किया।

यह काम करता है: http://jsfiddle.net/5VTTD/1/, लेकिन यह जेएस का उपयोग करता है।

Answer 1

आप किसी बाहरी <div> एक कंटेनर के रूप में और फिर एक आंतरिक एक एक वर्ग के रूप में की आवश्यकता होगी।

मैंने वर्ग के लिए 50% आयामों का उपयोग किया, लेकिन आप इच्छित आकार का उपयोग कर सकते हैं: यह माता-पिता <div> कंटेनर के सापेक्ष होगा।

मैंने इसे हाइलाइट करने के लिए इसे एक काला पृष्ठभूमि रंग भी दिया: यहां DEMO है।

यह चाल सभी <div> के padding-bottom: 100% में है।

सीएसएस:

#container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 100%; 
} 

#square { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
} 

HTML:

<div id="container"> 
    <div id="square"> 
    </div> 
</div> 

Answer 2

इस पर एक नज़र डालें: http://jsfiddle.net/5VTTD/9/