html - 带有最大宽度容器的Firefox中的响应式img

Question

在具有最大宽度的容器内需要一个响应式 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 之间的区别

Answer 1

您的图片的 CSS 是错误的，而不是

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

放

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

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