响应式图像 - 额外填充？

Question

我正在为使用响应式设计而设置的wordpress使用基础主题来编程网站，并且存在图像问题。

我得到一个额外的底部填充，我根本无法在萤火虫上看到。这是我所拥有的mockuo，问题出现在jsFiddle上，所以我猜它与模板无关。

<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/

我读了这方面的一些答案，有的说用填充的百分比，我做到了，并没有解决问题。为什么会发生这种情况，我该如何解决？

Answer 1

的问题与此相关的直列放置元素的默认垂直对齐方式。你可以理解的行为，在此MDN documentation页面寻找：

这样或更改元素的显示属性，或者你最好改变vertical-align属性（恕我直言，这是更好，因为你不改变显示器）

Answer 2

设置显示：在图像上块风格排序，对我来说:)

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

Answer 3

display:block应该是你的修复.. http://jsfiddle.net/dbCsY/1/