2019年10月22日

「object-fit」|「cover」と「contain」の使い分け

「object-fit」|「cover」と「contain」の使い分け

お世話になっております。佐藤です。

前回に引き続き、「object-fit」に関して書いていこうと思います。

object-fitの基本

タイトルには「cover」と「contain」の使い分けとありますが、まずは基本を書いておきます。
「object-fit」には指定できる値が5つあります。

fill(初期値)ボックス内を満たすように縦横比を変えながらリサイズされます。
cover縦横比を保持してボックスを完全に覆うようリサイズされます。縦横のうち小さい方を基準にして自動的にリサイズし、ボックスからはみ出した部分はトリミングされます。
contain縦横比を保持し、ボックスに収まるようにリサイズされます。幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
noneリサイズせず、そのまま表示します。
scale-down 「none」と「contain」のうち、小さい方のサイズに合わせて表示します。

以上の通り、5つの値を設定できますが、圧倒的に「cover」と「contain」を使用率が高いです。

「cover」の使用例としては以下の通りです。

onject-fit:coverの使用例

最近のサイトでは多い最初のファーストビュー(以下、FV)を画面幅いっぱいに画像や動画を敷き詰めるというような時に重宝します。(意外と知らない方もいるのではないかと思いますが、動画にも使用できます!)

単に画面幅いっぱいに敷き詰めるだけなら、以下のコードでも対応可能です。

img {
  width: 100%;
  height: auto;
}

ただし、これだと大画面になった際に高さが大きくなりすぎるのです。私が経験した案件ではこんな要望がありました。

案件の内容1

「画面いっぱいに画像を敷き詰めると、下のコンテンツが見えなくなるのである程度で高さを制限してほしい。」

img {
  height: 80vh; //任意の高さを指定
  width: 100%;
  object-fit: cover;
}

このような要望に対応する際には「cover」はとても便利です。高さを指定することでそれ以上は大きくなりませんが、比率を変えずに画像を見せることができます。

しかし、困ったことにCMSの対応案件では以下のような要望もありました。

案件の内容2

「画像を綺麗に全部見せたいので、途中で切れて欲しくないです。また、小さい画像にも対応できるようにして欲しい。」

「contain」の使用例

上記の要望に対応するのに最適なのが「contain」です。
例えば、以下のようなデザインは良くあるパターンだと思います。(キャラクターが並んでおり、そこをクリックできるようになっているデザイン。)

onject-fit:coverの使用例

ここに「cover」を指定すると画面幅によってはキャラクターがトリミングされてしまいます。これを防ぐためには「contain」を指定します。「contain」を使用した例が以下の例です。

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
onject-fit:containの使用例

綺麗にキャラクターを出力することができました。この「contain」を使用すると小さい画像に指定した時も無理やりに引き伸ばして荒い画像になることも防いでくれます。場合によっては画像に背景色を指定することで隙間を埋めることも可能です。

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background-color: #aaa;
}
onject-fit:contain+背景色を設定の使用例

先ほどの画像は背景が透過されているので、分かりにくいので画像を変更しました。このようにデザインによって背景色を変更することで画像に生じる隙間を埋めつつ、違和感の無い処理をすることが可能となります。

是非、画像や動画の処理をする際に参考にしてみて下さい!