响应式图像 - 额外的填充？
我正在使用 WordPress 的 Foundation 主题编程一个网站，该主题是为响应式设计设置的，但我对图像有疑问。
我得到了一个额外的底部填充，我在萤火虫上根本看不到。这是我所拥有的模拟，问题出现在 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%;
}
我读了一些关于这个的答案，有些人说使用填充作为百分比，我这样做了，但没有解决问题。为什么会发生这种情况以及如何解决它？
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%;
}
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
该问题与此内联放置元素的默认垂直对齐方式有关。您可以查看此 MDN 文档 页面来了解行为：
因此，或者您更改元素的 display 属性，或者您最好更改
vertical-align属性（恕我直言，这更好，因为您不更改显示）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-alignproperty (IMHO it's better because you don't change the display)在图像上设置 display:block 样式可以对我进行排序:)
例如 http://jsfiddle.net/dbCsY/
Setting display:block style on the image sorts it for me :)
e.g http://jsfiddle.net/dbCsY/
display:block应该是你的修复.. http://jsfiddle.net/dbCsY/ 1/display:blockshould be your fix.. http://jsfiddle.net/dbCsY/1/