带有最大宽度容器的Firefox中的响应式img答案

【问题标题】：responsive img in firefox with a max-width container带有最大宽度容器的Firefox中的响应式img
【发布时间】：2014-05-27 22:59:32
【问题描述】：

需要一个具有最大宽度的容器内的响应式 img。

HTML：

<div class="center-content">
    <img src="assets/test-slider.png" alt="" />
</div>

CSS：

/*center-content*/
.center-content{
    position:relative;
    max-width:1200px;
    margin:0 auto;}


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

这在 -webkit 中可以正常工作，但在 firefox 中则不行...

任何帮助将不胜感激。

/编辑/

http://jsfiddle.net/WKHHR/

检查 Firefox 和 Chrome 之间的区别

【问题讨论】：

您的代码的任何演示或小提琴将不胜感激。
请解释什么是不工作的。
当将浏览器宽度调整到 1200 像素以下时，img 保持其原始大小。在 Chrome 和 Safarie 中，它会根据浏览器更改大小。
在 Firefox 中使用 v24.0a1 对我来说效果很好。
我明白了...在小提琴中为我工作...愚蠢..我认为一定与@media有关..

标签： html css firefox responsive-design

【解决方案1】：

图片的 CSS 错误，而不是

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

放

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

这是因为您总是希望图像宽度为其父 div 的 100%。

【讨论】：

它总是简单的事情......我认为在相同的代码上工作很长时间，THNX！
在 Zurb Foundation 中嵌入图像时，这也适用于我。在 Firefox 上，他们没有调整大小，因此不会超出他们的列。
这可能有效，但这不是一个普遍的答案。 max-width 与 width 不同。在一般情况下，将宽度设置为 100% 是错误的 - 这不应该在全局范围内设置，并且应该只在您明确需要它的图像上设置。另一方面，将 max-width 全局设置为 100% 是一个很好的默认值。