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

Question

我正在创建一个灵活的网格网站，但遇到了一个障碍。 CSS 属性 max-width:100%; 似乎没有作用于我的 Logo 图像。它应该随着灵活的网格调整大小，但事实并非如此。也许我没有正确调用图像或者我的语法不正确？图片为 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;
}

知道为什么它不起作用吗？图片是 .png 应该没关系，对吧？

Answer 1

id 和 element 之间有一个空格:

img #logo => img#logo

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