在 100% 的 div 内使用精灵

Question

我是第一次尝试使用精灵……我花了一两分钟的时间来理解它，但我得到了它的基本实现。但是，我正在尝试使用精灵来替换

您可以看到live example of here。我遇到的问题是我的页脚设置如下：

 footer{
    width: 100%;
    height: 11%;
    position: fixed
    bottom: 0px;
 }

并且每张图片都占据脚的百分比宽度。例如，

.head{
   width: 18%
   height: 100%;
}

这样，随着浏览器窗口的变大或变小，图像也会随之缩放...（注意：从 1150 像素或更大，然后处理其他媒体查询。）

现在我想出了如何用一个精灵替换页脚中的所有图像。

像这样，只是为了确保我明白：

 /* html*/

  <div id="head-hover">
       <a href="#" class="logo_head_thumb"></a>
  </div>

 /*css */

 .moneda-logo, .logo_head_thumb, .Swix-logo-thumb, .scotiaMcleod, .POC-logo1,
 .alpine-canada-logo-thumb, .cowboy-logo, .Love, .maddy, .gray, .delsorbo, .bietz{
    background: url('https://s3.amazonaws.com/benjaminthomsen.images/sprites.png') no- repeat;
 }
.logo_head_thumb{
    background-position: 0 -210px ;
    width: 300px;
    height: 60px;
    padding-right: 100%;
    padding-bottom:16%;
}
#head-hover{
   float:left;
   height: 100%;
   width: 15.9%;
}

（仍然需要进行一些调整，但或多或​​少），但您可以看到我迄今为止的尝试over here ...最初使用 1920 像素的页脚宽度完成。

问题是，当它缩小每个 div 的宽度时，它的百分比也会缩放（例如，宽度为 300 像素的 div 变为 200 像素）并且总精灵图像不会缩放或适合新空间.

是否有一些简单的方法可以让带有精灵的新页脚栏像当前在现场网站上的一样？

无需调整 sprite .png 图像的大小以及每 20 或 30 像素重写一次媒体查询中的所有 CSS（因为这是目前我认为可能的唯一方法），或者也许有一个可以使用的 jQuery 脚本或者我实际上根本没有掌握如何正确使用精灵。我真的很想节省额外的 14 个左右的 HTTP 请求，这样使用 sprite 会减轻负担，但我不关心修改当前站点的用户界面。

Answer 1

这是一个使用 inline-block 的示例（使用 table/table-cell 可能会更短）：

ul , body{
  margin: 0;
  padding: 0;
}
img {width: 100%;}
ul {
  width: 100%;
  font-size: 0;}
ul:before {
  content: '';
  display: inline-block;
  padding-top: 5%;
  vertical-align: top;
}
li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  background-size: auto 100%;
  background: url(http://i.stack.imgur.com/2xDHJ.png);
}
li:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
}
li a {
  display: inline-block;
  font-size: 32px;
  font-size: 2rem;
  vertical-align: middle;
  line-height: 5vw;
  height: 5vw;
  width: 8vw;
  /* To show them for tst */
  color: turquoise;
  text-shadow: 0 0 0.5em lime;
}
#sp1 {
  width:9%;
  background-size: auto 100%;
}
#sp1:before {
  padding-top: 59%;
}
#sp2 {
  width: 15%;
  background-size: auto 100%;
  background-position: 10.5% 0;
}
#sp2:before {
  padding-top: 35%;
}
#sp3 {
  width:17%;
  background-size: auto 100%;
  background-position: 29% 0;
}
#sp3:before {
  padding-top: 31%;
}
#sp4 {
  width: 15%;
  background-size: auto 100%;
  background-position: 48% 0;
}
#sp4:before {
  padding-top: 35%;
}
#sp5 {
  width: 19%;
  background-size: auto 100%;
  background-position: 69% 0;
}
#sp5:before {
  padding-top: 28%;
}
#sp6 {
  width: 14%;
  background-size: auto 100%;
  background-position: 88% 0;
}
#sp6:before {
  padding-top: 38%;
}
#sp7 {
  width:11%;
  background-size: auto 100%;
  background-position: 100% 0;
}
#sp7:before {
  padding-top: 48%;
}

在这里查看和玩结果:) - http://codepen.io/gc-nomade/pen/Hezro