Question

继承我的CSS，我的img语法。但是，它应该在浏览器调整大小时响应调整大小。这适用于Chrome，但IE＆amp; 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

对图像的问题进行响应调整

1 个答案: