Css 以响应的方式布置图标

我想按顺序排列40x40px图像图标，当浏览器大小减小时，这些图标会自动减小大小

使用此技术后：每个图像的整个窗口宽度大约为1144px

我应该如何纠正这个问题

我使用了以下代码

 <div id="customtoolbar">
    <div class="topbar">
      <div class="icons">

        <a href="http://wsris:9191/" class="icon icon-papercut"><img src="sites/default/files/newicons/papercut.png" border="0" style="width:100%"></a>
        <a href="https://www.google.com/calendar" class="icon icon-cyberoam"><img src="sites/default/files/newicons/calendar.png" border="0" style="width:100%"></a>
        <a href="https://docs.google.com/" class="icon icon-drive"><img src="sites/default/files/newicons/drive.png" border="0" style="width:100%"></a>
        <a href="https://mail.google.com/" class="icon icon-gmail"><img src="sites/default/files/newicons/gmail.png" border="0" style="width:100%"></a>
        <a href="http://mycompanyschool.in/" class="icon icon-calendar"><img src="sites/default/files/newicons/calendar.png" border="0" style="width:100%"></a>
        <a href="https://classroom.google.com/u/0/welcome?emr=0" class="icon icon-classroom"><img src="sites/default/files/newicons/classroom.png" border="0" style="width:100%"></a>

    </div>

---

您可以查询媒体，并为所需的每个分辨率设置大小：

@media (max-width: 500px) {
    img{
        width:32px;
        height:32px;
    }

}

@media (min-width: 501px) {
    img{
        width:40px;
        height:40px;
    }

}

这里有一个关于mozilla媒体查询的链接：

下面是一个JSFIDLE：

您可以选择背景图像：

HTML代码：

<div id="penguin"></div>

---

jsfiddle代码：

哦，我是通过使用宽度来实现的：img标签的宽度为5%或6%，任何使图标看起来正常的东西。现在他们的反应是：

img{
width:5%;
height:auto;
max-width:40px;
}

试试下面的CSS：

如果您使用css宽度：100%，它会将img宽度设置为可用的浏览器宽度。使用最大宽度。

一种过度过顶的解决方案

我建议您使用CSS精灵，即不要创建半打图标，只需创建一个包含所需图标的图像即可。 CSS精灵可以用作背景图像，并使用“背景大小：封面”使其响应。 通过填充技术使用固定纵横比，以便图标根据屏幕大小按比例展开/收缩。 在链接中添加一些文本标签，以便搜索引擎能够阅读它们。 .图标{ 显示：内联块； 宽度：16%；/*100%/6，减去一些空白空间*/ 最大宽度：40px；/*最大40px宽*/ 文本缩进：-999px；/*这将隐藏文本标签*/ 背景尺寸：封面；/*裁剪用背景图像填充图标*/ 背景图像：urlhttp://i.stack.imgur.com/sPkRn.png; 框阴影：0 1px 000000； } .图标：之后{ 内容：；/*这是固定纵横比技巧*/ 显示：内联块； 填充顶部：100%； 宽度：1px； 垂直对齐：底部；/*此选项省略底部空白*/ } .icon.icon-papercut{ 背景位置：0；/*对齐背景的左上角*/ } .icon.icon-cyberoam{ 背景位置：0.20%；/*6个精灵图标->0.20%，40%，…，100%*/ } .icon.icon-drive{ 背景位置：0.40%； } .icon.icon-gmail{ 背景位置：0.60%； } .icon.icon-calendar{ 背景位置：0.80%； } 图标教室{ 背景位置：0.100%； }

---

使用最大宽度：40px；？您仍在寻找答案，还是对您提供的解决方案感到满意？@apaul34208是的，我正在寻找正确的答案，这应该是理想的答案。我在脑海中提到了我所尝试的。您的解决方案是否有任何不太理想的地方需要改进？@apaul34208我只是想知道如何以自适应的方式来解决这个问题。我不擅长CSS。像你这样的专家应该告诉你什么是理想的。这将使图像在所有屏幕上保持40px宽，除非屏幕宽度小于40px。

img{
width:5%;
height:auto;
max-width:40px;
}

img {
    width:100%;
    max-width:40px;
    height:auto;
}