image inside of div looks out of it

Question

I'm trying to fit an image inside a div. I think that's a easy thing to do but i don't understand why the image is half out of the div.

That's my html:

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

My css:

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

.bar img {
    width:100%;
}

Here is a fiddle to show what i try to say

Answer 1

You can change the default vertical alignment on the image:

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

jsFiddle example

Answer 2

Add display:block; to the image.

Fiddle