div内部的图像看起来不合适

Question

我试图将image放入div内。我认为这很容易，但我不明白为什么image是div的一半。

那是我的HTML：

<div class="bar">
    <img src="images/bar.png" />
</div>

我的css：

.bar {
    height:10px;
    width:100px;
    border:1px solid black;
}

.bar img {
    width:100%;
}

这是fiddle来显示我想说的话

Answer 1

将display:block;添加到图像中。

Fiddle

Answer 2

您可以更改图像上的默认垂直对齐方式：

.bar img {
    width:100%;
    vertical-align:top;
}

<强> jsFiddle example