1

Skeleton を使用してレスポンシブ Web サイトを作成しています。通常、ブラウザー ウィンドウのサイズが変更されると、それに応じて各コンテナー内の画像が調整されますが、マウスオーバー効果を組み込んだ 2 つの画像に問題があります。

ここにHTMLがあります。画像にカーソルを合わせると、置換画像がトリガーされます。

<div class="row">
  <div id="feature" class="eight columns alpha">
<a href="http://swordandplough.com/pages/lookbook" class="cssmouseover" style="background-image: url('http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Lookbook-Link.jpg?3039');"></a>
</div>
  <div id="feature" class="eight columns omega">
<a href="http://swordandplough.com/pages/video" class="cssmouseover" style="background-image: url('http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Video-Link.jpg?3039');"></a>
</div>
</div>

そして、これがマウスオーバー CSS です。

a.cssmouseover {
display:block;
width:580px;
height:260px;
max-width:100%;
max-height:100%;
background-position:50% 0%;
}
a.cssmouseover:hover {
background-position:50% -100%;
}

画像のサイズを正しく変更するために、次の div ID も追加しましたが、機能していません。

#feature img {
max-width: 100%;
height: auto;
}

比例してスケーリングする代わりに、画像の高さは同じサイズのままで、幅は両側でトリミングされます。

どんな考えでも大歓迎です！

4

1 に答える 1

1

背景画像を使用しているため、＃featureimgに適用されたプロパティは何もしていません。background-size: coverスプライトではなく、ホバーに2つの画像を使用して探索することをお勧めします。これは、いくつかの優れたドキュメントを含む記事です。 http://voormedia.com/blog/2012/11/sensitive-background-images-with-fixed-or-fluid-aspect-ratios

于 2012-12-24T18:35:21.323 に答える