0

こんにちは私は「背景画像」を使用して、横向きまたは縦向きのサムネイルの単純なグリッド(2x3)を作成しています。これはうまく機能します。ただし、ホバー時に高解像度の画像にスケールアップしてほしい。高解像度のものは何らかの方法で隠す必要があると思います。ありがとう

4

2 に答える 2

2

background-size:これは、CSS3のプロパティを使用して行うことができます。

単純なHTML:

<div class="wrapper">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <span class="clear"></span>
</div>​

CSS:

.wrapper
{
    width: 300px;
    height: 200px;
}

.thumb
{
    background: url(http://placehold.it/100x100) no-repeat;
    background-size: 50% 50%; /*CSS3*/
    background-position: 50% 50%;
    width: 100px;
    height: 100px;
    float: left;
    -webkit-transition: background-size 1s; /*CSS3*/
    -moz-transition: background-size 1s; /*CSS3*/
}

.thumb:hover
{
    background-size: 100% 100%;
    -webkit-transition: background-size 1s; /*CSS3*/
    -moz-transition: background-size 1s; /*CSS3*/
    cursor: pointer; 
}

span.clear
{
    display: block;
    height: 0;
    width: 100%;
    clear: both;
}
​

高解像度の画像をすぐに提供し、background-size:プロパティを使用して縮小します。次に、ホバーすると画像を拡大します。これにより、各画像の2つのバージョンが読み込まれなくなり、CSS3トランジションを使用するとかなりクールに見える可能性があります;)

これはCSS3であるため、(私が思うに)IE8以下はこれをサポートしないことを忘れないでください。

http://jsfiddle.net/Kyle_Sevenoaks/CFM5Q/

于 2012-11-21T09:25:13.443 に答える
1

これがカイルの答えの修正です。それがあなたのニーズに合うかどうかはわかりませんが(使用しないbackground-imageで、タグだけを使用します<img>)、誰かがそれを便利だと思った場合に備えて投稿します。バックグラウンドサイジングを使用する代わりに、CSS3トランスフォーム(scaleこの場合)とトランジションを使用することもできます。

http://jsfiddle.net/vheVk/1/

于 2012-11-21T09:37:39.900 に答える