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

Question

मेरे पास तत्वों का एक सेट है और इसकी आवश्यकता है कि उनकी न्यूनतम चौड़ाई उनकी ऊंचाई के बराबर हो, लेकिन ऊंचाई स्पष्ट रूप से सेट नहीं है। वर्तमान में मैं jQuery के माध्यम से सीएसएस min-width संपत्ति की स्थापना द्वारा इस लक्ष्य को हासिल करने में सक्षम हूँ:

$(document).ready 
(
    function() 
    { 
     $('.myClass').each 
     (
      function() {$(this).css('min-width', $(this).css('height'));} 
     ); 
    } 
); 

यह सीएसएस में सीधे इस व्यवहार निर्दिष्ट करना संभव है?

यहाँ एक jsfiddle का प्रदर्शन कर रहा है कि मैं क्या हासिल करने की कोशिश कर रहा हूँ: http://jsfiddle.net/p8PeW/

Answer 1

मैं नहीं मानता कि यह जे एस के बिना संभव है, लेकिन हो सकता है किसी ने मुझे गलत साबित कर सकते हैं?

सीएसएस आपको गतिशील चर का उपयोग करने की अनुमति नहीं देता है, इसलिए अगर पृष्ठ लोड होने तक ऊंचाई सेट नहीं की जाती है, तो मुझे यकीन नहीं है कि यह कैसे किया जा सकता है।

Answer 2

आप वर्गों बनाने की कोशिश कर रहे हैं, तो आप दोनों ही मामलों (W > H और W < H) के लिए खाते में करना होगा:

$('label').each(function() { 
    if ($(this).height() > $(this).width()) { 
     $(this).css('min-width', $(this).height()); 
    } else { 
     $(this).css('min-height', $(this).width()); 
    } 
}); 

Answer 3

यह जे एस के बिना वास्तव में संभव है!

कुंजी <img> का उपयोग करना है, जो replaced element है, और इसलिए यदि आप केवल ऊंचाई निर्धारित करते हैं, तो छवि की अंतर्निहित पहलू अनुपात को संरक्षित करने के लिए इसकी चौड़ाई स्वचालित रूप से सेट हो जाएगी। यदि आप एक 4 के लिए .contents चाहता था

<style> 
    .container { 
    position: relative; 
    display: inline-block; /* shrink wrap */ 
    height: 50%; /* arbitrary input height; adjust this */ 
    } 
    .container > img { 
    height: 100%; /* make the img's width 100% of the height of .container */ 
    } 
    .contents { 
    /* match size of .container, without influencing it */ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 
</style> 

<div class="container"> 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
    <div class="contents"> 
    Put contents here. 
    </div> 
</div> 

:

इसलिए आप निम्न कर सकते 3 पहलू अनुपात है, तो आप के बजाय 133% करने के लिए img की ऊंचाई सेट होगा, इसलिए की चौड़ाई img और इसलिए .contents.container की ऊंचाई का 133% होगा। 4 पहलू अनुपात:

1 का लाइव डेमो http://jsbin.com/afecej/1/edit (अतिरिक्त कोड टिप्पणी के साथ)

यदि आप सोच रहे हैं, img डेटा यूआरआई एक 1x1 px transparent gif के लिए है)। अगर छवि में 1: 1 पहलू अनुपात नहीं था, तो आपको अनुरूप मूल्यों को समायोजित करना होगा।

Answer 4

W3C Box Model से गद्दी पर:

<percentage> The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

तो तुम यह केवल सीएसएस का उपयोग कर सकते हैं। this examplethis blog post से दूसरे विषय पर समान रूप से दिलचस्प देखें।

Answer 5

एक और बहुत ही सरल सीएसएस समाधान है, लेकिन केवल सटीक मामले के लिए ओपी उसकी jsfiddle में प्रस्तुत किया:

label { 
 
    background-color: Black; 
 
    color: White; 
 
    padding: 1px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    min-width: 1em; /* set width to the glyphs height */ 
 
}

<label>A</label><br/> 
 
<label>B</label><br/> 
 
<label>C</label><br/> 
 
<label>D</label><br/> 
 
<label>E</label><br/> 
 
<label>F</label><br/> 
 
<label>R6a</label>