0

更新 2: さらなる進歩。もうすぐそこ！

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

スプライトは 99% 応答するようになりました。

margin-bottom:  %

ページの幅が変わるため、完全に整列しません。の

margin-left:    %

うまくいくようです。

margin-bottom を完全に揃える方法について何か考えはありますか?

更新: 進行中ですが、まだそこにはありません。

以下は 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 に答える