SoyaBlog

これを見れば解決しそうや

HOME>CSS>置換要素を表示領域に合わせてどのようにフィットさせるかを指定するobject-fitについて解説
ブログ投稿日時:
ブログ更新日時:
置換要素を表示領域に合わせてどのようにフィットさせるかを指定するobject-fitについて解説

置換要素を表示領域に合わせてどのようにフィットさせるかを指定するobject-fitについて解説

  1. object-fit とは
  2. object-fit の指定方法
  3. object-fit: none; の指定方法と表示
  4. object-fit: fill; の指定方法と表示
  5. object-fit: contain; の指定方法と表示
  6. object-fit: cover; の指定方法と表示
  7. object-fit: scale-down; の指定方法と表示
  8. 今回のまとめ
1.

object-fit とは

object-fit とは、画像や動画などの置換要素を表示領域に合わせてどのようにフィットさせるかを指定するプロパティです。

2.

object-fit の指定方法

object-fit を指定するときによく使う値は下記の5つです。

キーワード内容
none拡大・縮小されず、そのままのサイズで表示される。(初期値)
fill表示領域全体を覆うように拡大・縮小します。その際、縦横比を無視して埋め尽くします。
contain画像は縦横比を維持したまま、表示領域にフィットするように拡大・縮小されます。
必ず画像全体が見えるように収まるので、表示領域と要素の縦横比が異なる場合は、上下もしくは左右に余白が発生します。
cover要素は縦横比を維持したまま、表示領域を完全に覆うように拡大・縮小されます。
表示領域に余白が発生しないように要素が引き伸ばされるので、表示領域と要素の縦横比が異なる場合は、要素の上下もしくは左右の一部が切り取られます。
scale-down要素が表示領域に収まらない場合はcontainになり、要素が表示領域よりも小さい場合はnoneが適用されます。

それではそれぞれの指定方法と表示を見ていきましょう。

3.

object-fit: none; の指定方法と表示

それでは object-fit: none; の指定方法と表示を見ていきましょう。

<img src="sample.jpg" alt="サンプル画像">
img {
  object-fit: none;
}

object-fit: none; で指定したときは要素が表示領域より大きいか小さいかで内容が変わります。

要素が表示領域よりも大きい場合

要素が表示領域よりも大きい場合はトリミングされます。

都市

要素が表示領域よりも小さい場合

要素が表示領域よりも小さい場合は余白が発生します。

都市
4.

object-fit: fill; の指定方法と表示

次に object-fit: fill; の指定方法と表示を見ていきましょう。

<img src="sample.jpg" alt="サンプル画像">
img {
  object-fit: fill;
}

表示領域と要素の縦横比が異なる場合

object-fit: fill; を指定すると表示領域全体を覆うように拡大・縮小します。

その際、縦横比を無視して埋め尽くすため、表示領域と要素の縦横比にズレがある場合は要素が潰れたような表示になります。

桜と寺
5.

object-fit: contain; の指定方法と表示

次に object-fit: contain; の指定方法と表示を見ていきましょう。

<img src="sample.jpg" alt="サンプル画像">
img {
  object-fit: contain;
}

表示領域と要素の縦横比が異なる場合

object-fit: contain; を指定すると要素は縦横比を維持したまま、表示領域にフィットするように拡大・縮小されます。

必ず画像全体が見えるように収まるので、表示領域と要素の縦横比が異なる場合は下記のように上下もしくは左右に余白が発生します。

ひまわり
6.

object-fit: cover; の指定方法と表示

次に object-fit: cover; の指定方法と表示を見ていきましょう。

<img src="sample.jpg" alt="サンプル画像">
img {
  object-fit: cover;
}

表示領域と要素の縦横比が異なる場合

object-fit: cover; を指定すると要素は縦横比を維持したまま、表示領域を完全に覆うように拡大・縮小されます。

表示領域に余白が発生しないように要素が引き伸ばされるので、下記のように表示領域と要素の縦横比が異なる場合は、要素の上下または左右の一部が切り取られます。

紅葉と寺
7.

object-fit: scale-down; の指定方法と表示

次に object-fit: scale-down; の指定方法と表示を見ていきましょう。

<img src="sample.jpg" alt="サンプル画像">
img {
  object-fit: scale-down;
}

object-fit: scale-down; で指定したときは要素が表示領域より大きいか小さいかで内容が変わります。

要素が表示領域よりも大きい場合

要素が表示領域よりも大きい場合は object-fit: contain; が適用されます。

雪景色

要素が表示領域よりも小さい場合

要素が表示領域よりも小さい場合は object-fit: none; が適用されます。

雪景色
8.

今回のまとめ

この記事では object-fit について解説しました。

object-fit とは、画像や動画などの置換要素を表示領域に合わせてどのようにフィットさせるかを指定するプロパティです。

それぞれの内容を理解し、使い分けていきましょう。

最後までお読みいただきありがとうございます。