बच्चे की छवि ऊंचाई के आधार पर डीआईवी ऊंचाई नीचे

Question

पर कुछ अतिरिक्त पिक्सल जोड़ती है छवि के मूल div के नीचे कुछ अतिरिक्त पिक्सल क्यों होते हैं। माता-पिता div ऊंचाई के हार्ड कोड के बिना मैं पिक्सल को कैसे हटा सकता हूं।

http://jsfiddle.net/6x8Dm/

एचटीएमएल

<div class="wrapper"> 
    <div class="column"> 
     <img src="http://www.lorempixel.com/200/200/" /> 
    </div>  
</div> 

सीएसएस

.wrapper { 
    width:200px; 
    margin:0 auto; 
} 
.column { 
    width:100%; 
    background:#cc0000; 
} 

img { 
    width:100%; 
} 

Answer 1

वह जगह वास्तव में फोंट में अवरोही तत्वों का परिणाम है। आप कई तरीकों से में यह से छुटकारा पाने के कर सकते हैं:

• छवि के लिए एक vertical-align:top नियम जोड़ने jsFiddle example
• युक्त div को font-size:0; जोड़ने jsFiddle example
• छवि के लिए display:block; जोड़ने jsFiddle example

Answer 2

एक तरह से img पर display:block की स्थापना, यह माता पिता को भरने के लिए पैदा कर रहा द्वारा होता है।

jsFiddle here - यह काम करता है।

img { 
    width:100%; 
    display:block; 
} 

वैकल्पिक रूप से, अगर आप यही तरीका पसंद नहीं है, आप भी खड़ी संरेखण, बदल सकते हैं के रूप में डिफ़ॉल्ट baseline है।