Responsive images - Extra padding?

Question

I'm programming a website using Foundation theme for wordpress that is setup for responsive designs and I have a problem with images.

I get an extra bottom padding that I simply cannot see on firebug. This is a mockuo of what I have, and the problem shows up on jsFiddle so I'm guessing it has nothing to do with the template.

<div class="container">
    <img src="http://www.lamasia.es/web/new/wp-content/uploads/imagen3.png" alt=""/>
</div>

img{
  height:auto;
  max-width:100%
}

.container{
  background-color:#ccc;
  padding:2%;
  width:40%;
}

http://jsfiddle.net/dbCsY/

I read some answers on this and some said use padding as a percentage, which I did and didn't solve the issue. Why is this happening and how can I fix it?

Answer 1

The issue is related to the default vertical-alignment of this inline placed element. You can understand the behaviour looking at this MDN documentation page:

so or you change the display property of the element, or you better change the vertical-align property (IMHO it's better because you don't change the display)

Answer 2

Setting display:block style on the image sorts it for me :)

e.g http://jsfiddle.net/dbCsY/

Answer 3

display:block should be your fix.. http://jsfiddle.net/dbCsY/1/