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