Css 在100%的分区内使用精灵

我第一次尝试使用精灵。。。我花了一两分钟才想明白，但我得到了它的基本实现。然而，我正试图用精灵来代替

你可以看到一个。我遇到的问题是我的页脚设置如下：

 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%;
}

/*html*/
/*css*/
.moneda徽标、.logo\u head\u thumb、.Swix徽标thumb、.scotiaMcleod、.POC-logo 1、，
.alpine canada徽标thumb、.cowboy徽标、.Love、.maddy、.gray、.delsorbo、.bietz{
背景：url（'https://s3.amazonaws.com/benjaminthomsen.images/sprites.png")不重复;；
}
.徽标_头_拇指{
背景位置：0-210px；
宽度：300px；
高度：60px；
右：100%；
垫底：16%；
}
#头悬停{
浮动：左；
身高：100%；
宽度：15.9%；
}

（仍然需要一些调整，但或多或少），但您可以看到我迄今为止的尝试。。。最初是用1920皮克斯的页脚宽度完成的

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

有没有什么简单的方法可以让新的带有精灵的页脚栏像当前在线站点上的一样工作

---

不必调整sprite.png图像的大小，并每隔20或30像素重写媒体查询中的所有CSS（因为这是目前唯一可能的方式），或者可能有一个jQuery脚本可以使用，或者我实际上根本不掌握如何正确使用sprite。我真的很想保存额外的14个HTTP请求，使用sprite可以减轻这些请求，但我不想修改当前站点的用户界面。

下面是一个使用内联块的示例（使用table/table cell可以缩短实现时间）：

---

在这里查看并播放结果：）-

您好，我在这里有一个测试页面，上面显示了精灵的大小，并保留了显示它们的框的比例。我看了一下你那页上的代码，一个星期天我脑子里都是乱七八糟的；），希望这能给你一个很好的提示，告诉你如何度过美好的一天在你目前的网站上，加拿大阿尔卑斯山的标志会变得很奇怪，因为你已经设定了一个高度和宽度的百分比。将“高度”设置为“自动”以解决此问题。由于您的图像高度和宽度不同，因此很难进行此操作。@GCyrillus真棒谢谢您的帮助，这正是我所需要的，我相信我可以从这里了解到，非常感谢@布伦丹·莫里森：不客气，请看下面的答案，以帮助您开始：）嗨，oki，我刚刚用叉子叉了它。为了帮助你，你需要有html格式的图像，并在li上插入阴影，这样你就有了点来告诉你发生了什么，以及你是否为每个片段保持了正确的比例。哇，再次谢谢你。。。你帮了我很大的忙。。。希望我现在可以出发，弄清楚我到底需要什么！

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%;
}