css Max-Width不会调整图像大小

Question

我正在创建一个灵活的网格网站，但我遇到了麻烦。 CSS属性max-width:100%;似乎无法处理我的徽标图片。它应该与灵活的网格一起调整大小，但事实并非如此。也许我没有正确调用图像或我的语法不正确？图片为200x67，这里是相关的HTML：

<header>
<img src="images/so_200.png" alt="Website.com" id="logo" />
</header>

以及这里的CSS：

header {
background-color:#ccc;
padding:1%;
}
img #logo {
display: block;
max-width:100%;
max-height:100%;
width: auto;
height: auto;
}

知道它为什么不起作用？这个图像是不是重要的，对吧？

Answer 1

删除img和#logo

之间的空格

img#logo {
    display: block;
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
}

图像文件类型（png）与css规则无关。

Answer 2

id和元素之间有一个空格：

img #logo =＆gt; IMG＃标志

img#logo {
  display: block;
  max-width:100%;
  max-height:100%;
  width: auto;
  height: auto;
}