如何使图像组合响应？

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

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

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