基本的に、情報を持たない画像は背景画像で処理している。ただ、どうしても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」で指定する。
補足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