如何通过“类”作出响应来包含背景图像

Question

我有以下codepen-http://codepen.io/anon/pen/PPLeRV?editors=110

我从icomoon创建了SVG子画面-并将其用作背景图像类。我需要知道如何使它响应。

html

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

css

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(http://imgh.us/sprite_4.svg);
}
.icon-home {
    width: 96px;
    height: 96px;
    background-position: 0 0;
}
.icon-play {
    width: 96px;
    height: 96px;
    background-position: -112px 0;
}
.icon-clubs {
    width: 96px;
    height: 96px;
    background-position: -224px 0;
}
.icon-books {
    width: 108px;
    height: 96px;
    background-position: -336px 0;
}
.icon-folder-open {
    width: 96px;
    height: 96px;
    background-position: -560px 0;
}
.icon-location2 {
    width: 96px;
    height: 96px;
    background-position: -672px 0;
}

[不幸的是，当我使用这些图像时，它不适用于不同的媒体类型。我可以使用媒体查询-但缩放功能无法正常使用。

我正在使用此功能来减少http请求-精灵和所有，而不是单个图像的url。

我尝试将它们放在弹性框中-和div等-但它没有响应。

帮助：）

Answer 1

DEMO

[使用背景尺寸和高度以及相对单位，就像我使用vw一样

1vw = 1% of viewport width

[当浏览器调整高度时（以vw为单位），它会根据浏览器的宽度而变化。它支持主要浏览器：Firefox，Chrome，但我不了解IE

.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("http://imgh.us/sprite_4.svg");
  border: 1px solid grey;
  width: 100%;
  height: 20vw;
  max-width: 10%;
  background-size: 80vw 20vw;
}
.icon-home {
  background-position: left -1% bottom 0px;
}
.icon-books {
  background-position: left 43% bottom 0px;
}
.icon-folder-open {
  background-position: left 72% bottom 0px;
}
.icon-location2 {
  background-position: left 87% bottom 0px;
}

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

Answer 2

将background-size用于媒体查询。下面给出一个示例。

我在您的CSS中添加了以下代码。它对我有用。

* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
}
@media screen and (max-width:450px) {
    .icon {
        background-size: 100vw 11vw;
    }
    .icon-home, .icon-play, .icon-clubs, .icon-books, .icon-folder-open, .icon-location2 {
        width: 11vw;
        height: 11vw;
    }
    .icon-home {
        background-position: 0 0;
    }
    .icon-play {
        background-position: -14vw 0;
    }
    .icon-clubs {
        background-position: -27vw 0;
    }
    .icon-books {
        background-position: -41vw 0;
    }
    .icon-folder-open {
        background-position: -64vw 0;
    }
    .icon-location2 {
        background-position: -78vw 0;
    }
}

HTML

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

注意：我使用以下方法删除了所有默认边距，填充，边框和轮廓：>