div內的圖像看起來不對了

Question

我試圖在div內適合image。我認爲這是一件容易的事情，但我不明白爲什麼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