使 CSS Sprite 具有响应性

Question

更新 2：取得进一步进展。差不多好了！

jsFiddle：http://jsfiddle.net/persianturtle/Tfemm/6/

精灵现在 99% 响应，除了

margin-bottom:  %

随着页面宽度的改变，排列不整齐。

margin-left:    %

似乎工作得很好。

关于如何完美对齐边距底部的任何想法？

更新：取得了进展，但还没有。

下面是 jsFiddle：http://jsfiddle.net/persianturtle/Tfemm/5/

我想裁剪的精灵图像是响应式的，除了它只被水平裁剪而不是垂直裁剪。

代码如下：

<div class="responsive-sprite" style="width: 100%;">  
<img alt="Yay for alt tags..." src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" />  
</div> 

img {  
 width: 100%;  
 height: 200%;
 margin-left: -81.869%;  
}  
.responsive-sprite {  
 overflow: hidden; 
}  

有人能想出一种方法来垂直裁剪吗？

以下是原帖：

有没有办法让 CSS 精灵响应？

看看附上的jsFiddle：http://jsfiddle.net/persianturtle/Tfemm/2/

一旦容器不再适合全尺寸图像，有没有办法调整这个 CSS 精灵的大小？

<div class="container">

    <h2 class="popular"><img src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" alt="" />Featured</h2>

</div>




.container {
    width: 20%;
    margin: 0 auto;
}

h2 {
    overflow: hidden;
    position: relative;
    height: 128px;
    width: 192px;
    max-width: 100%;
}
h2 img {
  position: relative;
}
h2.popular img {
  top: 0;
  left: -867px;
}
h2.popular img:hover {
  top: -128px;
  left: -867px;
}

Answer 1

嗯。棘手。

我还没有测试过，但是将精灵水平定向而不是垂直定向是否可行：

h2 {
    overflow: hidden;
    position: relative;
    width: 192px;
    max-width: 100%;
}

h2 img {
    position: relative;
    width: 200%;
}

h2.popular img {
    top: 0;
    left: 0;
}

h2.popular:hover img {
    top: 0;
    left: -100%;
}

编辑：

似乎工作，只需要配置精灵。看看这个JSFiddle。

不幸的是，我认为您必须单独执行每个按钮，因为图像高度决定了调整大小时按钮的高度。