Как сделать комбинацию изображений чувствительной?

Question

У меня есть заголовок, который имеет 5 меню. Эти 5 меню - всего лишь изображения.

Ширина изображения первого меню больше. И все другие ширины изображения меню такие же, как показано ниже снимок экрана.

я закодированы следующим образом, чтобы, как указано выше.

<div id="head-section"> 
     <ul> 
      <li><a href="index.html"><img src="res/1.png"></a></li> 
      <li><a href="index.html"><img src="res/Home-n.png"></a></li> 
      <li><a href="http://eywaz.com/sit2/MTA-2Website21-02/mta"><img src="res/blog.png"></a></li> 
      <li><a href=""><img src="res/Help-n.png"></a></li> 
      <li><a href=""><img src="res/Contact_us-n.png"></a></li> 
     </ul> 
    </div> 

CSS выглядит следующим образом:

#head-section { 
    width:800px; 
    margin:auto; 
    margin-top:30px; 
} 

ul li{ 
    float:left; 
    display:block; 
    width:15%; 
} 

ul li:first-child{ 
    width:37.5%; 
} 

ul li a img{ 
    width:100%; 
} 

Заголовок выглядит красиво. Но при уменьшении размера браузера изображения в заголовке не уменьшаются. Размер полного заголовка остается таким же.

Я сделал Google, но я не понимаю, как его решить. Пожалуйста, может кто-нибудь сказать мне, чтобы решить эту проблему. Спасибо заранее.

Answer 1

Попробуйте использовать -

ul li a img{ 
    max-width:100%; 
} 

и # головной секции

#head-section { width:100% } 

в то время как вы кладете ширину 100% к любому селектору, то не добавляйте дополнение/margin на этом div.

Answer 2

Просто измените width на #head-section к max-width:

#head-section { 
    max-width: 800px; 
    margin: auto; 
    margin-top: 30px; 
}