html - 以正确的宽高比调整图像大小的 CSS 水平菜单

Question

我找不到解决这个问题的方法，尽管我确信这很简单!

我使用无序列表和一系列图像(即“主页”、“关于”等)创建了一个水平菜单。每个图像的宽度各不相同，但高度相同，均为 25 像素。

当我调整浏览器大小时，我希望菜单的宽度和高度缩小。

当前代码如下:

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

我整理了一个 fiddle 来演示这个问题:

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

目前菜单的宽度和高度正在缩小，但图像的高度是错误的。

注释掉“宽度:15%”(在代码中突出显示)将正确显示图像，但随后它们会环绕而不是收缩。

如有任何帮助，我们将不胜感激，在此先感谢您!

Answer 1

如果您想让您的设计具有响应性，您必须考虑它会在用户调整屏幕大小时对屏幕宽度使用react。那么让所有图像具有相同宽度会容易得多。根据您的设计，这是可能的，但我不建议在菜单中使用图片!!!如果您查看 css 渐变，您可以在不使用任何图片的情况下实现与现在相同的设计(这对 SEO 来说更好)。最后，检查如何正确使用 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;
}