0

更新 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;
}
4

1 回答 1

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。

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

于 2013-02-16T23:51:14.633 回答