0

スプライト画像があり、ホバー時にアニメーション化する必要があります.上下にスライドして他の隠し部分(色付きのスプライト)を表示します. 以下のCSSはピクセルに対しては正常に機能しますが、ブラウザーが最小化/サイズ変更されたときにサイズが変更されるように、応答性を高めたいと考えています。

<div class="img" style="background-image: url(a.jpg)"></div>

<style>
.img {
background-position: 0 -258px;
display: block;
height: 258px;
margin: 0 0 3px;
position: relative;
width: 205px;
z-index: 1;
}
</style>
ここに画像の説明を入力

4

1 に答える 1

0

画像をレスポンシブにする最も簡単な方法は、幅を 100% にしてそのままにしておくことです。そうすれば、常に親コンテナーの幅が使用され、その幅を使用して高さを適切にレンダリングするための比率が求められます。

これを見てください：

<div class="wrapper"><img class="img" src="a.jpg" width="100%" alt="image" /></div>

<style>
  .wrapper { width:20%;}
</style>

上記のコードでは、画像はラッパーのサイズに従って調整され、ウィンドウのサイズが変更されるとサイズも変更されます。

ただし、コードでは、画像の一部を非表示にする必要があるため、ラッパー クラスをレスポンシブになるようにスタイリングすることは頭痛の種になります。

これが私が思いついたものです：

<style>
  .wrapper { width:244px; height:256.5px; overflow:hidden;}
  .img{transition: 1s ease-in;}
  .wrapper:hover > .img{ margin-top:-105%;}
</style>

あとは、ラッパー クラスを流動的にするだけで、イメージはスイートに従います。Mybeパーセンテージでうまくいきます。

于 2013-11-11T19:23:16.747 に答える