制作記事 Web制作マークアップCSSimgタグで、containやcoverする → object-fit

imgタグで、containやcoverする → object-fit

基本的に、情報を持たない画像は背景画像で処理している。ただ、どうしてもimgタグで対応する必要がある場合、それでいてbackground-size: cover; や background-size: contain; をしたいときの対処方法。

まずはサンプルページを用意しました。
imgタグで、containやcoverするサンプル

実際のサンプルページのソースはサンプルページでご確認いただくこととして、HTMLに記述するところをシンプルにすると下記のとおり。

<style>
img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}
</style>
<img src="test.jpg">

おさえておきたいポイントは2つ。

1. imgタグに表示したい幅と高さを指定する

画像自体の縦横比を保持した幅と高さを指定するのではなく、画像を表示したい領域の幅と高さをimgタグに指定する。ちなみに高さを「auto」にしてはいけないので要注意

2. imgタグにobject-fitを指定する

続いて、そのimgタグにCSSのプロパティ object-fit を指定して、トリミングして全体表示したい場合は値を「cover」、トリミングなしで表示したい場合は値を「contain」で指定する。

imgタグで、containやcoverするサンプル

補足1 object-fit の値

object-fit の値として、coverやcontain以外にも、「fill、scale-down、none」がある。「fill」は画像の縦横比は無視して表示されるため、これならimgタグにサイズを指定すればいい。「none」はobject-fitを指定しないと同等なので説明不要。気になるのは「scale-down」。これは「noneとcontain」を混ぜたような挙動なのだが利用シーンがすぐに思いつかない。とりあえず、自分の場合は、object-fit の値としては「cover」か「contain」を使うことになる。

補足2 object-position

背景画像をbackground-position を使って表示位置を指定するように、imgタグの表示位置を調整するプロパティ「object-position」が用意されている。値の指定方法は、まさにbackground-positionと同じなのでイメージしやすい。何も指定しない場合は「center center」、いわゆるセンタリングとなる。

補足3 ブラウザ対応状況

Internet Explorer では未対応のためキャッチアップが数年遅れましたが、IE対応が不要であれば何も気にすることなく利用できる。

“object-fit” | Can I use… Support tables for HTML5, CSS3, etc

ちなみに今回用意したサンプルでは、下記のブラウザで正常に動作していることを確認している。
[Windows] Microsoft Edge 100.x / Google Chrome 100.x
[Mac] Safari 15.4 / Google Chrome 100.x / Firefox 99.x
[スマホ] Android 10 Chrome 99.x
[iPhone] iOS 15.x Safari
[iPad] 15.x Safari

imgタグで、containやcoverするサンプル