我有一个包含 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 搜索了一下,但我不知道如何解决它。 请任何人告诉我解决这个问题。 提前致谢。
最佳答案
尝试使用-
ul li a img{
max-width:100%;
}
和#head-section
#head-section { width:100% }
当您为任何选择器设置 100% 宽度时,请不要在该 div 上添加填充/边距。
关于html - 如何使图像组合响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16786845/