基于子图像高度的DIV高度在底部添加了少量额外像素

Question

为什么图像的父div在底部有一些额外的像素.如何在没有硬代码父div高度的情况下删除像素.

http://jsfiddle.net/6x8Dm/

HTML

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

CSS

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

img {
    width:100%;
}

Answer 1

该空间实际上是字体中下降元素的结果.你可以通过多种方式摆脱它:

• 添加vertical-align:top规则到图像jsFiddle示例
• 添加font-size:0;到包含div jsFiddle示例
• 添加display:block;到图像jsFiddle示例

Answer 2

一种方式是通过设置display:block在img,导致它填补了父母.

jsFiddle这里 - 它的工作原理.

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

或者,如果您不喜欢这种方法,您也可以更改垂直对齐方式,默认为baseline.