Question

我正在使用基础主题编写一个网站，用于设置响应式设计的wordpress，我的图像存在问题。

我得到一个额外的底部填充，我在firebug上看不到。这是我所拥有的模拟，问题出现在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

设置显示：图像上的块样式为我排序：）

例如http://jsfiddle.net/dbCsY/

Answer 3

display:block应该是你的解决方案.. http://jsfiddle.net/dbCsY/1/

响应式图像 - 额外填充？

3 个答案: