[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック

デスクトップでは通常のサイズ、タブレットでは縮小サイズ、スマフォではクロップして画像を表示させるスタイルシートのテクニックを紹介します。

Focal Point: Intelligent Cropping of Responsive Images

• デモ
• 実装

デモ

デモは表示サイズで、画像のサイズや表示領域が変化します。

デモページ：幅1,200pxで表示

レスポンシブの対応は2種類用意されており、ある程度の表示サイズであれば縮小して表示されます。iPadなどの768pxまでは縮小表示です。

デモページ：幅768pxで表示

768pxよりサイズが小さいと、画像をクロップして表示します。

デモページ：幅600pxで表示

実装

まずは、実装のイメージから。
使用する画像の重要な箇所を選定します。

クロップする箇所を選定

このアイデアの一番大切なポイントで下記の写真を例にすると、主題となるのは画像の右側の人物になります。

中心箇所を選定

画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。

HTML

HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。

<div class="focal-point">
  <div><img src="guy.jpg" alt="guy"></div>
</div>

div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。

クロップする箇所を指定するには、classを追加します。

<div class="focal-point right-3 up-3">
  <div><img src="guy.jpg" alt=""></div>
</div>

右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。

CSS

まずは、ベースとなるスタイルシートです。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

レスポンシブに対応させるため、ボックスモデルをborder-boxにします。

続いて、レスポンシブ対応の画像用に幅を100%にします。これで表示サイズに合わせて最適な幅で表示され、高さも自動で補正されます。

.focal-point {
    width: 100%;
    height: auto;
    overflow: hidden;
}
 
.focal-point img {
    width: 100%;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
}
 
.focal-point div {
    position: relative;
    max-width: none;
    height: auto;
}

最後に、クロップのスタイルシートです。ブレークポイントは767pxに設定しました。
ここで画像をクロップするために、ネガティブマージンを設定します。

@media all and (max-width: 767px) {
 
    /* 4x3 Landscape Shape (Default) */
    .focal-point div {
        margin: -3em -4em;
    }
 
    /* Landscape up (Total 6em) */
    .up-3 div {
        margin-top:    -1.5em;
        margin-bottom: -4.5em;
    }
     
    .right-3 div {
        margin-left:  -6em;
        margin-right: -2em;
    }
}