レスポンシブ背景画像

アダプティブレイアウトの主なタスクの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の記事から引用した例。