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

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

我做了谷歌，但我不知道如何解决它。请任何人告诉我解决这个问题。提前致谢。

Answer 1

尝试使用 -

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

和#head-section

#head-section { width:100% }

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

Answer 2

只需将widthon更改#head-section为max-width：

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