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; 
} 

Любая идея, почему это не работает? Не имеет значения, что изображение является .png, правильно?

Answer 1

У вас есть пространство между идентификатором и элементом:.

IMG #logo => IMG # логотипа

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

Answer 2

Удалить пространство между img и #logo

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

тип файла изображения (PNG) не имеет значения для правил CSS.