以响应方式布置图标

Question

我希望按顺序布局40x40px图像图标，这样可以在浏览器尺寸缩小时自动缩小尺寸。

使用此技术后：Make an image responsive - simplest way每个图像都跨越整个窗口宽度（大约1144像素）。

我该如何纠正？

我使用了以下代码

 <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>

Answer 1

哦，我是通过使用＆＃34;宽度：5％＆＃34;或img标签的6％使图标看起来没问题。现在他们回应了：

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

Answer 2

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

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

}

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

}

以下是有关mozilla媒体查询的链接：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

这是一个小伙伴：http://jsfiddle.net/alexfqc/0uft975k/

你可以背景图像：

HTML code：

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

CSS代码：

#penguin{
    background: url('http://images.all-free-download.com/images/graphiclarge/penguin_clip_art_7050.jpg') no-repeat;
    width:408px;
    height:425px;
    background-size: 75%;
}

jsfiddle代码：http://jsfiddle.net/alexfqc/ozh0qzpc/

Answer 3

尝试以下CSS：

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

如果使用css width：100％，则会将img width设置为可用的浏览器宽度。使用max-width。

Answer 4

过度解决方案

1. 我建议您使用CSS精灵，即不要创建六个图标，只需创建一个包含所需图标的图像。
2. CSS精灵可以用作背景图片，并使用background-size: cover进行响应。
3. 使用固定宽高比通过填充技术，以便您的图标根据屏幕大小按比例扩展/缩小。
4. 在链接中放入一些文本标签，以便搜索引擎可以阅读它们。
＆＃13;
＆＃13;
.icon {
  display: inline-block;
  width: 16%;                    /* 100% / 6, subtract some room for whitespace */
  max-width: 40px;               /* maximum 40px wide */
  text-indent: -999px;           /* this hides the text labels */
  background-size: cover;        /* crop-fill the icon with background image */
  background-image: url(http://i.stack.imgur.com/sPkRn.png);
  box-shadow: 0 0 1px #000000;
}
.icon:after {
  content: "";                   /* this is the fixed aspect ratio trick */
  display: inline-block;
  padding-top: 100%;
  width: 1px;
  vertical-align: bottom;        /* this elimiates bottom whitespace */
}
.icon.icon-papercut {
  background-position: 0 0;      /* align background's top-left */
}
.icon.icon-cyberoam {
  background-position: 0 20%;    /* 6 icons on sprite -> 0, 20%, 40%, ..., 100% */
}
.icon.icon-drive {
  background-position: 0 40%;
}
.icon.icon-gmail {
  background-position: 0 60%;
}
.icon.icon-calendar {
  background-position: 0 80%;
}
.icon.icon-classroom {
  background-position: 0 100%;
}
＆＃13;
<div class="icons">
  <a href="#" class="icon icon-papercut">Papercut</a>
  <a href="#" class="icon icon-cyberoam">Cyberoam</a>
  <a href="#" class="icon icon-drive">Drive</a>
  <a href="#" class="icon icon-gmail">GMail</a>
  <a href="#" class="icon icon-calendar">Calendar</a>
  <a href="#" class="icon icon-classroom">Classroom</a>
</div>
＆＃13;
＆＃13;
＆＃13;

这是示例中使用的图像：