以正確的長寬比調整圖像大小的CSS水平菜單

Question

我無法找到解決方案，儘管我確信它很簡單！

我創建了一個使用無序列表和一系列圖像（即「主頁」，「約」等）的水平菜單。每個圖像的寬度都不相同，但具有相同的25px高度。

當我調整瀏覽器的大小時，我希望菜單的寬度和高度縮小。

當前的代碼如下：

<style> 

#container ul.content_list { 
} 
#container ul.content_list li { 
    float: left; 
    list-style: none; 
    width: 100%; 
} 
#container ul.content_list li .image{ 
    float: left; 
    width: 100%; 
    max-height: 25px; 
} 
#container ul.content_list li .image img { 
    float: left; 
    display: inline-block; 
    width: 15%; /* comment this out to make the images the correct width and height */ 
    max-height: 25px; 
} 

</style> 

<div id="container"> 
    <ul class="content_list"> 
     <li> 
      <div class="image"> 
       <img src="homeOff.png" /> 
       <img src="aboutOff.png" /> 
       <img src="servicesOff.png" /> 
       <img src="portfolioOff.png" /> 
       <img src="contactOff.png" /> 
       <img src="blogOff.png" /> 
      </div> 
     </li> 
    </ul> 
</div> 

我已經把小提琴來演示該問題：

http://jsfiddle.net/CAM79/JQuuj/

目前菜單的寬度和高度，但萎縮圖像的高度是錯誤的。

註釋掉'寬度：15％'（在代碼中突出顯示）會正確顯示圖像，但它們包裹而不是縮小。

任何幫助將不勝感激，非常感謝提前！

Answer 1

如果您想讓您的設計更具響應性，您必須認爲它將在用戶調整大小時對屏幕寬度做出反應。然後用相同的寬度製作所有圖像會容易得多。根據你的設計，這是可能的，但我不會推薦使用菜單中的圖片！如果你看看CSS漸變，你可以實現現在沒有使用任何圖片（這是更好的搜索引擎優化）相同的設計。總而言之，請檢查如何正確使用ul和li標籤，您也可以刪除所有類並只標記標籤名稱，這將使您的代碼更輕。你應該有這樣的事情結束：

<div id="container"> 
<ul> 
    <li><a>Home/</a></li> 
    <li><a>About/</a></li> 
    <li><a>Services/</a></li> 
    <li><a>portoflio/</a></li> 
    <li><a>contact/</a></li> 
    <li><a>blog/</a></li> 
</ul> 

和你的CSS例如可以有類似的東西：

#container ul li{ 
float: left; 
width:15%; 
background:black; 
background: #999; /* for non-css3 browsers */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 

} 

#container ul li a{ 
color:yellow; 
text-align:center; 
font-weight:bold; 
}