Ограничение размера изображения

Question

Взгляните на это - http://thegalaxyseries.com/amazon. Изображения флагов в нижнем колонтитуле отображаются правильно, когда я просматриваю это на ПК. Однако они увеличиваются и кажутся зернистыми на телефоне. Вот CSS, который я использую.

#footer { 
    display: block; 
    max-width: 32px !important; 
    max-height: 32px !importent; 
    image: url(http://static1.squarespace.com/static/5653b243e4b00b10015d2a20/t/565f318be4b02e4017e3bd55/1449079179674/flag-icon-us.gif); 
} 

Что мне не хватает?

Answer 1

Проверьте это: http://jsfiddle.net/u7ft319o/2/

HTML:

<div id="footer"> 
    <img class ="footer-image" src="http://static1.squarespace.com/static/5653b243e4b00b10015d2a20/t/565f318be4b02e4017e3bd55/1449079179674/flag-icon-us.gif"/> 
</div> 

Css:

#footer { 
    display: block; 
    max-width: 32px !important; 
    max-height: 32px !importent; 
} 

.footer-image{ 
    max-width: 32px !important; 
    max-height: 32px !importent; 
}