[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック

Post on:2018年8月28日

画像に適した方法で実装しよう

今、金曜日の17時だとします。あなたは仕事を終わらされなければなりません。しかし、手元にある画像はレイアウトに適していません。
そんな時に使えるCSSのテクニックがあります！

.myImg {
  background-image: url("my-image.png");
  background-size: cover;
}

.myImg {

background-image: url("my-image.png");

background-size: cover;

}

よく知られたテクニックで、一度は試したことがあるでしょう。
しかしこの方法は、最適ではありません。

画像を配置するのにbackgroundプロパティを使用するのは非常に便利で、もちろん機能します。ただし、コンテンツではない画像やテキストを置換する画像など特定の場合にのみ適した実装方法であることを忘れないでください。

画像を配置するこれからのテクニック

backgroundプロパティのようなテクニックが、img要素でも利用できるとしたら便利だと思いませんか？
そこでobject-fitプロパティの登場です！画像だけでなく、動画にも利用できます。

.myImg {
  object-fit: cover;
  width: 320px;
  height: 180px;
}

.myImg {

object-fit: cover;

width: 320px;

height: 180px;

}

これで先ほどと同じようになります。
ポイントはobject-fitプロパティに「cover」を指定するだけです。

注意点は何かありますか？

残念ながら、object-fitはIEやSafariの古いバージョンでは機能しませんが、ポリフィルが利用できます。

object-fitのポリフィル

object-fitのサポートブラウザ

実際の動作は、下記デモをご覧ください。

See the Pen Responsive images #2 by Adrien Zaganelli (@adri_zag) on CodePen.

IEでも機能する、Netflixで使用されているテクニック

IEで機能しないテクニックは使えないと思うかもしれません。心配しないでください、次に紹介するテクニックはIEでも機能し、私のお気に入りです。

親要素のpaddingプロパティに画像の比率をパーセントで定義し、子要素である画像には「position: absolute;」にしてサイズを100%で指定します。
参考: How To - Aspect Ratio

.wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.wrapper {

position: relative;

padding-top: 56.25%; /* 16:9 Aspect Ratio */

}

img {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: auto;

}

少し複雑に見えますか？
コンセプトを一度理解すれば、このテクニックはシンプルで簡単です。Netflixをはじめ、広く使用されています。

Netflixで使用されているコード

実際の動作は、下記デモをご覧ください。

See the Pen Responsive images #3 by Adrien Zaganelli (@adri_zag) on CodePen.

簡単な方法

あなたはすでにこれを知っているかもしれません。

img {
  height: auto;
  width: 100%;
/* even more control with max-width */
  max-width: 720px;
}

img {

height: auto;

width: 100%;

/* even more control with max-width */

max-width: 720px;

}

レイアウトがあまり複雑でないなら、ほとんどの場合に機能します。

See the Pen Responsive images #4 by Adrien Zaganelli (@adri_zag) on CodePen.

パフォーマンスを考慮した方法（上級）

パフォーマンスとは、ロード時間を意味します。例えば大きなヒーローイメージはパフォーマンスを台無しにして、特にスマホでページ表示をゆっくりと感じさせます。

最近のモダンブラウザでは、ページの幅に応じて画像のソースを変更できることを知っていますか？ srcsetはそのためにできました。
参考: srcsetのサポートブラウザ

画像を配置する際、<img>はHTML5の<picture>タグと組み合わせることができます。

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg">
</picture>