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; 添加到图像中。

Answer 2

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

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

image inside of div looks out of it