レスポンシブ背景画像

アダプティブレイアウトの主なタスクの1つは、さまざまな画面解像度のデバイスで正しく表示されるように画像（背景画像を含む）をスケーリングすることです。

imgタグ内の画像を使用すると、すべてが簡単になります。幅をパーセンテージで設定すると、高さが自動的にスケーリングされます。 この方法は背景画像に適用できません。

固定アスペクト比

このトリックは、要素のパディングの割合として値を設定することです。 このメソッドは古いA List Apartブログ記事で最初に公開されましたが、それでもうまく機能しています。

800 x 450ピクセルの背景画像があり、16：9の固定アスペクト比の背景にする必要があるとします。 以下のコードでは 、インデントにpxが使用されていますが、すべてがemでも機能します 。 HTML5 figure要素もあります。古いブラウザーで正しく動作するために、 HTML5 shivを使用できます。

<div class="column"> <figure class="fixedratio"></figure> </div> 

 div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ } 

デモンストレーション

背景を追加

結果の要素は必要に応じてスケーリングされますが、背景画像を追加すると、結果はあまり良くありません。 background-size：cover属性を使用します。 残念ながら、Internet Explorer 8ではこの方法は機能しません。 この問題を解決するには、 background-positionを使用して背景を配置します。 背景画像は、少なくとも要素の最大幅と同じ幅でなければなりません。 それ以外の場合、画像はトリミングされます。

 <div class="column"> <figure class="fixedratio"></figure> </div> 

 div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } 

デモンストレーション

ゴムアスペクト比

デスクトップで見栄えの良い大きな背景画像があるとします。 ただし、モバイルデバイスでは小さすぎるため、背景の幅を小さくすることが適切なソリューションになります。



たとえば、幅300ピクセルの小さな画面で幅800 x 200ピクセル（4：1）の画像を150ピクセル（2：1）に縮小する必要があります。 高さとパディングトップの属性を計算しましょう：



この図は、幅が異なる背景画像の縦横比を示しています。 グラフの傾斜はpadding-top属性に対応し、初期の高さ（開始高さ）はheight属性に対応します。 結果はコードです：

 <div class="column"> <figure class="fluidratio"></figure> </div> 

 div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } 

デモンストレーション

SCSSを使用して計算する

padding-topおよびheight属性は、 SCSSなどのプリプロセッサーを使用して自動的に計算できます。 この例：

 /* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); } 

voormedia.comの記事から引用した例。