2

常に 100% の幅が必要な 3 つの幅の広い画像を含むサイトをコーディングしています。私はメディアクエリを使用していますが、各画像を 3 つ以上コピーして収まるようにする必要はありません。

これは、画像に必要な CSS です。

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    
}

ここに jsFiddle リンクがあります: http://jsfiddle.net/RtPEA/。リンクには、<div>サイズ変更する背景が必要な 3 つの のみが含まれています。

私はbackground-size:cover;多くのサイトで使用してきましたが、Firefox では、このサイトでは動作しないようです。

また、さまざまなjQueryプラグインも試しました。ある程度成功したものはいくつか見つかりましたが、iOS では動作しませんでした。

4

1 に答える 1

5

background-sizeプレフィックス付きのバージョンの後に追加する必要があります。

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

-moz-background-sizeは Firefox 3.6 でのみサポートされており、他の接頭辞付きのバージョンはそのまま使用できる保証はありません。

于 2012-12-05T11:09:03.367 に答える