html - CSS媒体查询img max-width不起作用

Question

我有一个包含许多条件媒体查询语句的样式表。范围从 iPhone 分辨率到 1600 像素。但是，我想让特定 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如果需要，请使用。