अधिकतम ऊंचाई: x% क्रोम पर काम नहीं करता

मुझे सीएसएस शैली का उपयोग अधिकतम चौड़ाई: 9 0% और अधिकतम ऊंचाई: 9 0% छवि आकार को परिभाषित करने के लिए किया जाना चाहिए ताकि खिड़कियों को ओवरफ्लो न किया जा सके। हालांकि, यह सफारी पर अच्छी तरह से काम करता है लेकिन क्रोम पर काम नहीं करता है।अधिकतम ऊंचाई: x% क्रोम पर काम नहीं करता

<style> 
div{ 
    padding: 0; 
    margin: 0; 
} 
.slide{ 
    text-align:center; 
    background-size: 100% 100%; 
} 
.user-img{ 
    max-height: 80%; 
    max-width: 90%; 
} 
</style> 

<body> 
    <div class="slide"> 
     <div id="container0" class="container slideDown front"> 
     <div class="image-container"> 
     <img src="http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpg" class="user-img" ></img>   
     </div>     
     </div> 
    </div> 
</body>

आप सफारी में इस डेमो खोलते हैं, तो पूरी छवि प्रदर्शित किया जा सकता है, लेकिन छवि अतिप्रवाह क्रोम पर खिड़की: यहाँ डेमो मैं jsfiddle पर लिखने है। समस्या को ठीक करने के लिए कोई तरीका? आपकी सहायताके लिए धन्यवाद!

स्रोत

2015-01-16 Rambo Li

किस पूर्वजों की ऊंचाई 'अधिकतम ऊंचाई' प्रतिशत होने के लिए है? [यह उदाहरण देखें] (http://jsfiddle.net/rdxuk7kj/1/)। – showdev

आपके उत्तर के लिए बड़ा धन्यवाद। यह वही है जो मैं ढूंढ रहा हूं। सभी divs ऊंचाई सेट करने के बजाय वहाँ कोई आसान तरीका है: 100%? छवि हमेशा कई divs में एम्बेडेड। –

मुझे लगता है कि आप '.fullheight {ऊंचाई: 100%;}' जैसी कक्षा बना सकते हैं और सभी तत्वों पर लागू कर सकते हैं। लेकिन, मुझे नीचे यूसुफ हैंनसेन का विचार पसंद आया। क्या ये तुम्हारे लिए कारगर है? – showdev

लेआउट में तरलता के प्रतिशत का उपयोग करने में कुछ बार मुश्किल है क्योंकि आपको कंटेनरों और सीमा-प्रकार की चीज़ों से निपटना होगा।

आप व्यूपोर्ट इकाइयों का उपयोग करना पसंद कर सकते हैं। आप css-tricks और caniuse पर उनके बारे में जान सकते हैं कि यह आपको दिखाएगा कि यह कितना अच्छा है।

अनिवार्य रूप से आप कह सकते हैं:

<div style="height: 55vh;">Hi</div>

55vh ऊंचाई की एक div तत्व जहां 1vh व्यूपोर्ट की ऊंचाई के 1% की मान के रूप में परिभाषित किया गया है, जिसका अर्थ है। कुछ जो 100vh व्यूपोर्ट की ऊंचाई का 100% होगा।

स्रोत

2015-01-16 21:35:43

कूल! यह अच्छा काम करता है । आपकी महान मदद के लिए धन्यवाद! –

आपको कंटेनर के लिए एक स्पष्ट मूल्य देना होगा। यह काम करेगा:

.image-container { 
    width: 500px; 
    height: 300px; 
}

आपके मामले में,% बेला में <html> तत्व से लिया जाता है।

MDN से:

प्रतिशत

प्रतिशत धारक ब्लॉक की ऊंचाई के संबंध में गणना की जाती है। यदि युक्त ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है, तो प्रतिशत मान को किसी के रूप में नहीं माना जाता है।

स्रोत

2015-01-16 21:24:38 Mosho

मुझे लगता है कि ओपी चाहता है कि छवि प्रतिशत सीमाओं के भीतर उत्तरदायी हो। – showdev

मैं समझता हूं, मैंने अभी बताया है कि यह क्यों काम नहीं करता है। – Mosho

आपके उत्तर के लिए धन्यवाद सब कुछ। यह भी सहायक है। –

अधिकतम ऊंचाई: x% क्रोम पर काम नहीं करता

उत्तर

संबंधित मुद्दे