on:2010年11月26日sponsors最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。Image[ad#ad-2]下記は各ポイントを意訳したものです。Files」で、まとめてダウンロードできます。背景画像をブラウザの枠いっぱいに表示するテクニックとはCSS3を使ったテクニックCSSだけで実装するテクニック:その1CSSだけで実装するテクニック:その2jQueryを使ったテクニック背景画像をブラウザの枠いっぱいに表示するテクニックとは前提として、下記のポイントが挙げられます。画像でページをいっぱいにします。空きは無いようにします。画像のサイズは必要があれば調整します。画像の表示はアスペクト比を維持します。画像の配置はページの中央です。スクロールバーは表示しません。可能な限り、対応ブラウザを多くします。Flashは使用しません。CSS3を使ったテクニックこれはもっとも簡単で、プログレッシブな方法です。CSS3の「background-size:cover;」で、目的通りにこれを実装することができます。CSS3対応ブラウザのみとなります。3.6+[ad#ad-2]CSSだけで実装するテクニック:その1ポイントは使用する画像のアスペクト比を維持しつつ、ブラウザの枠いっぱに表示することです。そこで、各ブラウザでサイズを変更することが可能であるインラインのimg要素を使用します。画像を常に100%のサイズで表示するようにし、決して少なくならないように設定します。Queriesで、ネガティブマージンを使い真ん中に配置していることです。FirefoxIE9IE7/8は画像のサイズが大きい場合のみ動作します。CSSだけで実装するテクニック:その2「position:fixed;」を使用したさらに簡単な方法です。「min-width」と「min-height」には単純に「100%」を指定します。min-height:100%;}上記の方法は画像を中央に配置することができません。そのためには、img要素をdiv要素で内包する必要があります。FirefoxIE8+jQueryを使ったテクニックこれを実装するには、インラインのimg要素のアスペクト比がブラウザの枠に比べて大きいか小さいか分かっていれば、事は簡単です。小さければ幅だけを100%にし、大きければ高さだけを100%にすれば、ブラウザの枠いっぱいに表示することができます。この情報をjQueryを使用して取得します。背景画像とコンテンツが重ならずに配置されます。Posts関連記事が見つかりませんでした。