如何使圖像響應組合？

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％的寬度到任何選擇器，那麼不要在該div上添加填充/邊距。

Answer 2

上#head-section到max-width只要改變width：

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