html - 如何使图像组合响应？

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%;
}

标题看起来不错。但是随着我减小浏览器的大小，标题中的图像并没有减少。完整 header 的大小保持不变。

我用 Google 搜索了一下，但我不知道如何解决它。请任何人告诉我解决这个问题。提前致谢。

Answer 1

尝试使用-

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

和#head-section

#head-section { width:100% }

当您为任何选择器设置 100% 宽度时，请不要在该 div 上添加填充/边距。