चौड़ाई की ऊंचाई को आधा होने के लिए सेट करें

Question

उपयोगकर्ता की स्क्रीन आकार के आधार पर चौड़ाई बदलने पर, मैं div की ऊंचाई को पूरी तरह आधा कैसे सेट कर सकता हूं?

मैं एक div पर सेट निम्नलिखित है ...

#div1 { 
    min-width:400px; 
    width:100%; 
    max-width:1200px; 
    height:400px; 
    background-color:red; 
} 

चौड़ाई इस पर ठीक काम करता है, यह 400 पिक्सेल पर ताले स्क्रीन बहुत संकीर्ण हो जाता है और यह भी 1200 पिक्सेल अगर विस्तार करना बंद कर दे स्क्रीन बहुत बड़ी हो जाती है। लेकिन, मैं यह भी चाहता हूं कि ऊंचाई किसी भी समय चौड़ाई के बराबर आधा हो। कुछ ...

#div1 { 
    min-width:400px; 
    width:100%; 
    max-width:1200px; 
    height:width/2; 
    background-color:red; 
} 

यह काम नहीं किया है (जिसे मैं वास्तव में इसकी उम्मीद नहीं कर रहा था)।

यदि संभव हो तो मैं सीएसएस का उपयोग करना पसंद करूंगा, लेकिन यदि उपयोगकर्ता मैन्युअल रूप से इंटरनेट विंडो के आकार को समायोजित करता है (जैसे पल के साथ क्या होता है) तो मैं ऊंचाई को बदलना चाहूंगा। मुझे यकीन नहीं है कि सीएसएस के साथ यह संभव है, हालांकि, यदि Jquery द्वारा इसे प्राप्त करने का कोई तरीका है तो मुझे इसका भी उपयोग करने में खुशी होगी।

jsFiddle of the above for reference.

किसी को भी मेरी मदद कर सकते हैं?

Answer 1

आप केवल आधुनिक ब्राउज़रों का समर्थन के साथ ठीक कर रहे हैं, तो आप ऐसा कर सकते हैं: http://jsfiddle.net/kNPfh/

VW उपाय व्यूपोर्ट चौड़ाई के 1/100 वीं में है, इसलिए 50vw स्क्रीन की चौड़ाई का 50% है।

<div class='halfwidth'></div> 

.halfwidth { 
    width: 100%; 
    height: 50vw; 
    background-color: #e0e0e0; 
} 

यदि नहीं, तो आप उपयोग कर सकते हैं: http://jsfiddle.net/ff7WC/

$(window).on('resize', function() { 
    $('.halfwidth').height($(this).width()/2); 
}).resize(); 

Answer 2

यह शुद्ध सीएसएस के साथ संभव नहीं है। आपको नए आकारों को जीने के लिए इसके लिए jQuery का उपयोग करना होगा। मुझे यह SO: Using jQuery To Get Size of Viewport

Answer 3

आप इसे मूल आइटम पर पैडिंग की सहायता से कर सकते हैं, क्योंकि सापेक्ष पैडिंग (यहां तक ​​कि ऊंचाई-वार) तत्व की चौड़ाई पर आधारित है।

सीएसएस:

.imageContainer { 
    position: relative; 
    width: 25%; 
    padding-bottom: 25%; 
    float: left; 
    height: 0; 
} 

img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
} 

जानकारी के लिए, विषय http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

पर लेख पढ़ें आप यह भी है कि के लिए jQuery का उपयोग कर सकते हैं, कुछ की तरह:

$('.ss').css('height',width()/2); 

कृपया इस रूप में चुनें सही जवाब अगर बाईं ओर टिक प्रतीक पर क्लिक करके यह आपके संदेह को हल करता है।

Answer 4

सुनिश्चित करें कि आप एक js फ़ाइल है तो का उपयोग इस

$(window).load(function(){ 
    $('.element').height($('.element').width()/2); 
    $(window).resize(function(){ 
     $('.element').height($('.element').width()/2); 
    }); 
}); 

http://jsfiddle.net/Hive7/8CNtU/2/