0

CSS3を使用するか、絶対位置と100％の高さ/幅を使用して、フルスクリーンの背景画像を作成するためのいくつかの手法が存在することを認識しています。

ただし、これらの手法はすべて固定の背景画像になります。つまり、スクロールバーが必要な画面よりも大きいコンテンツがある場合、スクロール時に背景画像は固定されたままになります。

画面の代わりに、背景画像をページの幅/高さに拡大することは可能ですか？

4

4 に答える 4

2

フルスクリーンのスライドショーを作成しているのと同じ問題がありました。固定位置では、要素を含む要素をスライドさせるのではなく、要素を含むスライドをスライドさせている間、画像が所定の位置に留まります...

私はそれらのテクニックを使用して多くの回避策を試しました：

  • CSSのみのテクニック＃1：位置を相対に設定すると正常に機能しますが、画像を垂直方向に中央揃えしません。

  • 素晴らしい、簡単、プログレッシブCSS3の方法：位置の値を満たさないことがうまくいった（本当に素晴らしい）ことに気付く前に、私は無駄にすべての可能性を試しました！

    html { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2012-11-23T10:39:30.057 に答える
1

この機能をページに追加するためのバックストレッチjQueryプラグインを紹介します。リンクされたページは、コンテンツがどのように固定され、ブラウザの幅/高さに応じて拡大縮小されるかを示しています。

編集

このようなソリューションをどのように実装するかはよくわかりません。読み込まれる前にコンテンツのサイズを確認できないため、JavaScriptを使用する必要があると思います。これが私がそれを試す方法です：

  • ロード後のコンテンツサイズを計算する
  • 背景画像のストレッチをコンテンツサイズに設定します
  • これを繰り返す関数をブラウザのサイズ変更にバインドします

パフォーマンスの面でどのように感じるかはよくわかりませんが、この手法の欠点の1つは、コンテンツにサイズ制限を設定しない限り、すべてのケースをカバーするために非常に大きな画像を使用しなければならない可能性があることです。

于 2011-07-20T07:26:48.877 に答える
1

このようなアプローチの問題は、コンテンツがどれだけ大きくなるかを推測できないことです。1,000ピクセル？10,000ピクセル？大きな画像を引き伸ばすことを想像してみてください。巨大な画像を使用するとページの読み込みが遅くなります。適度なサイズの画像を使用すると、境界を超えた場合に非常にひどく歪んでしまいます。

これを例に取り、それに応じてコンテンツ数を増やし、背景画像がどのように歪むかを確認します：http: //jsfiddle.net/andresilich/75Sfp/

于 2011-07-20T23:27:09.697 に答える
0

Webサイトに可変の画像サイズのヘッダー（完全な高さを占める）が必要だとします。

ヘッダー内に、任意の名前のIDまたはクラスを追加します。

私はそれを（id="test"）と見なします

次に、リンクされたJSファイルに移動してこれを貼り付けます。

var x = screen.availHeight + "px";
console.log(x)

document.getElementById("test").style.height = x;
于 2018-02-25T14:29:21.937 に答える