Html 如何使图像组合具有响应性？

我有一个标题，有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>

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

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

---

提前感谢。

只需将

头部部分的
宽度更改为
最大宽度
：

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

试用-

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

和#头部部分

#head-section { width:100% }

当您将100%宽度添加到任何选择器时，请不要在该分区上添加填充/边距。
使用最小宽度：您的值%；最大宽度：100%；
#head-section { width:100% }