Laying out icons in responsive way

Question

I want to lay out 40x40px image icons serially which should reduce size automatically when the browser size is reduced.

After using this technique: Make an image responsive - simplest way each image is spanning full window width (around 1144px) instead.

How should I correct this?

I've used the following code

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

Are you still looking for an answer or are you happy with the solution you provided? — apaul, Dec 21 '14 at 18:05
@apaul34208 Yes I'm looking for the right answer which should be ideal one. I mentioned what I tried from my mind. — AgA, Dec 22 '14 at 06:31
Is there anything that is specifically less than ideal with your solution that needs to be improved? — apaul, Dec 22 '14 at 17:41
@apaul34208 simply I want to know the best way to lay this out in adaptive way. I'm not good in CSS. What is ideal should be told by experts like you. — AgA, Dec 23 '14 at 06:23

score 3 · Answer 1 · answered Dec 10 '14 at 13:26

3

Oh I made it by using "width:5%" or 6% for img tag whatever make icons look ok. Now they are responsive:

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

answered Dec 10 '14 at 13:26

AgA

2,078
7
33
62

score 2 · Answer 2 · answered Dec 10 '14 at 11:49

You can you media queries and set the size for each resolution you want:

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

}

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

}

Here's a link about media queries at mozilla: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Here's a jsfiddle: http://jsfiddle.net/alexfqc/0uft975k/

You can you background-image:

HTML code:

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

CSS code:

#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 code: http://jsfiddle.net/alexfqc/ozh0qzpc/

score 1 · Answer 3 · answered Dec 23 '14 at 09:37

1

Try below CSS :

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

If you use css width:100%, it will set img width to available browser width. Use max-width with it.

answered Dec 23 '14 at 09:37

Shyam

782
5
12

This will keep images 40px wide on all screens unless the screen is less than 40px wide. – Salman A Dec 24 '14 at 19:10

Salman A · Answer 4 · 2018-07-03T09:21:44.793

An excessively over-the-top solution

I suggest that you use CSS sprites i.e. instead of creating half a dozen icons, just create one image that contains the required icons.
CSS sprites can be used as background image and made responsive using background-size: cover.
Use fixed-aspect-ratio-via-padding technique so that your icons expand/shrink proportionally according to screen size.
Throw some text labels inside the links so that search engines can read them.

.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(https://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%;
}

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

This is the image used in the example:

CSS sprite for the six icons

Laying out icons in responsive way

4 Answers4