html - 图像响应式调整大小有问题

Question

这是我的 img 语法的 CSS。但是，它应该在浏览器调整大小时响应地调整大小。这在 Chrome 中有效，但 IE 和 FIREFOX 出于某种原因无法正常工作 - 有什么原因吗？我使用的是最新的。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Answer 1

img max-width: 100% 是响应式图像的一种很好的技术，但它需要与图像容器(保存图像/包装图像的元素)一起使用，以便您看到它的响应能力。

试试这个，你应该让它跨浏览器工作:

<div class="imgHolder">
    <img src="http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>

所以你的图像被一个 div 包裹着。 CSS 将是:

.imgHolder{
    width: 100%;
    max-width: 1000px;
    padding: 10px;
    border: 3px dashed red;
    margin: 10px auto;
}

.imgHolder img {
       max-width: 100% 
}

可以查看codepen here