html - CSS 媒体查询 img 最大宽度不起作用

Question

我有一个包含大量条件媒体查询语句的样式表。范围从 iPhone 分辨率到 1600px。但是，我想在特定的 div 流体中制作 img，就像在调整浏览器窗口大小时调整大小一样，而不管已经编写的条件 @media 查询语句如何。我尝试使用

img { max-width: 100%}

但它根本不起作用，无论浏览器窗口如何，图像都保持原样。为了使其有效，我在属性的末尾添加了 !important，甚至粘贴到从 iPhone 分辨率到 1600px 的所有媒体查询语句中，但它不起作用。

无论已经编写的媒体查询如何，我如何实现这种效果，我希望图像在浏览器窗口更改时在某个 div 内变得灵活。

我添加了

#inner_container img { max-width:100% !important; }

在此样式表的末尾

http://strongcodelabs.com/test/css/style.css

Answer 1

如果您只想为较小的屏幕调整大小而不想在较大的屏幕上放大图像，这应该足够了:

#inner_container  img{
    width: auto;
    max-width: 100%;
}

将它添加到任何媒体查询之外，并确保值不会被其后的任何样式覆盖，如果需要，请使用 !important。