object-fitとは何か｜width・heightを両方指定したら、写真が横に潰れて表示された

サムネイル画像に width と height を両方書いたら、写真が真横に伸びて潰れて見えた。
原因はCSSのバグではなく、指定したサイズと実際の画像の縦横比が違っていただけだった。

正方形の枠に、横長の写真を押し込んだ

スポット紹介のサムネイルを並べるとき、width="400" height="300" と固定サイズで img タグに書いた。ところが元の写真は正方形に近い比率で撮っていたものが混ざっていて、そのうちの何枚かだけ人の顔が横に伸びたみたいに潰れて表示された。

最初はCSSの書き方が悪いのかと思って crop や resize のプロパティを探したが、そもそも見ていたのは width と height というレイアウト用の数値で、画像そのものをどう収めるかという指定は別に要ることに気づいていなかった。

ブラウザは、指定されたサイズに「そのまま伸ばす」

img タグに width と height を指定すると、ブラウザはその枠の中に画像を表示する。ただし何も指定しなければ、既定の挙動は object-fit: fill で、縦横比を無視してその枠いっぱいに画像を引き伸ばす。正方形の写真を横長の枠に当てはめれば、当然横に潰れる。

width と height を書くこと自体は正しい。書かないと画像が読み込まれるまでレイアウトの高さが決まらず、読んでいる途中で文章が下にずれる原因になる。今回崩れたのは「サイズを書いたこと」ではなく、「枠に収める方法」を何も指定していなかったことだった。

object-fit: cover で、縦横比を保ったまま切り抜く

そこで img に object-fit: cover を追加した。

object-fit: cover を指定すると、画像の縦横比を保ったまま、はみ出た部分を切り取って枠を埋めてくれる。正方形の写真を横長の枠に入れても、伸びるのではなく中央から左右が切れる形になり、見た目としては自然になった。位置をずらしたいときは object-position で調整できる。

ロゴは cover ではなく contain

写真のサムネイルは cover でよかったが、提携先のロゴを同じ書き方で入れたら、今度はロゴの端が切れてしまった。ロゴは全体が見えることの方が大事なので、ここは object-fit: contain に変えた。

contain は縦横比を保ったまま、枠の中に収まるようにサイズを合わせる。枠いっぱいには広がらず、余白ができることがあるので、その余白の色をロゴの背景色や地色に合わせておくと違和感がない。写真は cover、ロゴは contain という使い分けに落ち着いた。

width・heightは消さない。object-fitは足すもの

今回の直し方は、width と height を消すことではなく、object-fit を1行足すことだった。サイズの指定はレイアウトのガタつきを防ぐために要るもので、object-fit はその枠の中で画像をどう見せるかを決める、役割の違うプロパティだった。両方を揃えて初めて、崩れないサムネイルになった。