响应式图像 - 额外填充？答案

【问题标题】：Responsive images - Extra padding?响应式图像 - 额外填充？
【发布时间】：2012-02-20 18:03:48
【问题描述】：

我正在使用 Foundation 主题为 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/

我阅读了一些关于此的答案，有些人说使用填充作为百分比，我做了但没有解决问题。为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

此问题与此内联放置元素的默认垂直对齐有关。看看这个MDN documentation 页面，你可以理解行为：

所以或者你改变元素的显示属性，或者你最好改变vertical-align属性（恕我直言，最好不要改变显示）

【讨论】：

非常感谢你的链接，现在我知道为什么会这样了
谢谢。这让我发疯了。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：