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。

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

使CSS精灵响应

以下是原帖：

1 个答案:

编辑：