सीएसएस: इसकी चौड़ाई

Question

मेरे सवाल का ध्यान में रखते हुए एक div की ऊंचाई सापेक्ष बहुत ही इस सवाल के समान है: CSS: 100% width or height while keeping aspect ratio?

मैं एक div जिसका स्थिति तय हो गई है है। चौड़ाई div का 100% होना चाहिए और इसकी ऊंचाईचौड़ाई का बिल्कुल 1/6 वां होना चाहिए। क्या -webkit-calc() ऐसा करने का तरीका है?

नोट: जेएस समाधान को ज़ूम/अभिविन्यास परिवर्तन चौड़ाई/ऊंचाई को प्रभावित करने के रूप में पसंद नहीं किया जाता है।

Answer 1

के लिए टिप्पणी से दूसरे सुझाव यह है कि क्या आप के बाद कर रहे हैं है ले जाया गया? मैं -webkit-calc() का उपयोग नहीं कर रहा हूं। मैंने 1px6px छवि को बाहरी div में डाला है जिसमें position: fixed है, और 100% और position: relative के width के लिए छवि सेट करें। फिर मैंने एक आंतरिक div जोड़ा है जो पूरी तरह से अपने पूर्वजों के रूप में उच्च और चौड़ा होने के लिए तैनात है।

अब आप बाहरी div की चौड़ाई को बदल सकते हैं, और छवियों 'width: 100% सेटिंग है, जो यह सुनिश्चित करेंगे दोनों बाहरी और भीतरी div की हमेशा एक ऊंचाई उनकी चौड़ाई के 1/6 के बराबर है करने के लिए गारंटी दी जाती है (या कम से कम उतना ही बराबर के बराबर जितना बराबर हो सकता है, ऊंचाइयों को पिक्सल की सबसे नज़दीकी संख्या में बंद कर दिया जाएगा)। कोई भी सामग्री आंतरिक div के अंदर जा सकती है।

एचटीएमएल

<div> 
    <div></div> 
    <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" /> 
</div> 

सीएसएस

html, body { 
    margin: 0px; 
    padding: 0px; 
} 
div { 
    position: fixed; 
    width: 100%; 
} 
div > div { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px;  
} 
img { 
    width: 100%; 
    display: block;  
    position: relative; 
} 

यहाँ एक jsFiddle का अनुरोध व्यवहार दिखा है।

Answer 2

आप हमेशा इस तरह div चौड़ाई सेट कर सकते हैं:

$('#div1').css("width", $('#div1').height()/6); 

संपादित करें:

या आप कुछ इस तरह इस्तेमाल कर सकते हैं:

/* Firefox */ 
width: -moz-calc(100%/6); 
/* WebKit */ 
width: -webkit-calc(100%/6); 
/* Opera */ 
width: -o-calc(100%/6); 
/* Standard */ 
width: calc(100%/6); 

यह केवल एक उदाहरण है - .. लेकिन सीएसएस फ़ाइल में एक पिक्सेल में div की ऊंचाई प्राप्त करना असंभव है .. आपको उस

ईडीआई के लिए jquery का उपयोग करने की आवश्यकता है टी: एक चौड़ाई

$('#div1').css("height", window.width()/6); 

Answer 3

आप jQuery इस्तेमाल कर सकते हैं की

ऊंचाई 1/6, उदा $('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width()/6);

पठनीयता

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);}); 

Answer 4

आप Responsive square columns में वर्णित समाधान का भी उपयोग कर सकते हैं।

यह इस तथ्य पर आधारित है कि% padding-top/bottom और margin-top/bottom मूल तत्व की चौड़ाई के अनुसार गणना की जाती है।

अपनी स्थिति के लिए अनुकूलित इसे इस तरह दिखेगा:

FIDDLE

HTML:

<div class="wrap"> 
    <div class="content"> 
    </div> 
</div> 

सीएसएस:

.wrap{ 
    position:fixed; 
    width:100%; 
    padding-bottom:16.666%; /* 100x1/6 = 16.666...*/ 
} 
.content{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}