在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像素），并且总精灵图像不会缩放或适合新空间

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

无需调整精灵.png图像的大小，同时每隔20或30个像素重写媒体查询中的所有CSS（因为这是我目前唯一可行的方法），或者可能有一个可以使用的jQuery脚本或者我真的没有抓住如何正确使用精灵。我真的想保存额外的14个左右的HTTP请求，使用精灵会减轻，但我不在乎修改当前站点的用户界面。

Answer 1

以下是使用内联块的示例（可以使用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