प्रतिशत अधिकतम-ऊंचाई फ़ायरफ़ॉक्स में

Question

एचटीएमएल पर ध्यान नहीं दिया:

<div class="container"> 
    <article class="article"> 
     <img class="article-img" src="bordeaux.jpg" /> 
    </article> 
</div> 

सीएसएस:

.container{ 
    width:500px; 
    height:200px; 
} 
.article{ 
    max-height:100%; 
} 
.article-img{ 
    max-height:100%; 
} 

में अपनी jsfiddle देख फ़ायरफ़ॉक्स

http://jsfiddle.net/UETMr/4/

फ़ायरफ़ॉक्स में हटना करने के लिए छवि के लिए 100%

कोई व्याख्या कर सकते हैं कि कैसे फ़ायरफ़ॉक्स को समझने करता प्रतिशत अधिकतम-ऊंचाई और उसके कंटेनर: 63,210

मैं ऊंचाई तक .article सेट करने की जरूरत?

अग्रिम धन्यवाद!

Answer 1

यह the W3C specifications state के तरीके को समझता है। काम करने के लिए max-height के लिए, सामग्री के अलावा कुछ और को अपने तत्व के height को स्पष्ट रूप से सेट करने की आवश्यकता है। यही कारण है कि जब आप height: 100% सेट करते हैं तो यह काम करता है, क्योंकि अब आप .article को height अपने माता-पिता (इसकी सामग्री के बजाए) से स्पष्ट रूप से बता रहे हैं। लेकिन जब आपके पास .articlemax-height के साथ सेट है, तो यह अभी भी height के आकार का आकार बदलने की सीमा के साथ इसकी गणना height चला रहा है। और आपके मामले में, सामग्री img स्वयं है।

In this fiddle, आप देख सकते हैं कि .article.container की height करने के लिए स्वयं को बाधित वास्तव में है, लेकिन एक बड़ा ऊंचाई तक ऊपर जाने का ही (img) की सामग्री के लिए अनुमति देता है। img द्वारा अपने max-height क्योंकि .article एक स्पष्टheight सेट नहीं है सीमित नहीं है, लेकिन वास्तव img से इसकी ऊंचाई प्राप्त करने में है (केवल यह सीमित है कि यह अतीत अपने कंटेनर की height नहीं जा सकता है)।