基于子图像高度的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 example
• 将font-size:0;添加到包含div jsFiddle example
• 将display:block;添加到图片 jsFiddle example

Answer 2

一种方法是在display:block上设置img，使其填充父级。

jsFiddle here - 它有效。

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

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