画像の枠を埋める？全体を見せる？object-fitのcover・contain・fillを比べよう

画像のカードを同じ大きさにそろえると、写真が伸びたり、顔が切れたりすることがあるよ。画像の枠を決めることと、枠の中へ画像をどう収めるかは別の設定。object-fitで、比率を保ったまま収める方法を比べてみよう。

作例で確認すること

必要なのはブラウザだけ。作例では、横長の架空の景色を正方形の枠へ入れる。太陽・家・木の位置を見ながら、contain・cover・fillを切り替えよう。

画像ファイルそのものを切り取って保存する操作ではなく、表示の仕方を変えているよ。保存時のトリミングとリサイズとは区別してね。

枠の寸法も必要

.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

この例では正方形の表示領域を用意し、coverで埋める。object-fitは画像などの置換要素の中身の収め方を扱う指定で、親のレイアウトや任意の背景画像まで一律に変えるものではないよ。

「動かしてみよう」で比較

1. containにして、横長の景色が全部入り、上下に余白が出ることを見る。
2. coverにして、枠は埋まるけれど左右の一部が見えなくなることを見る。
3. fillにして、丸い太陽の形が変わることを見る。
4. リセットでcontainへ戻す。

coverの切り取り位置はobject-positionで調整できる。ただし重要な人物や文字がある画像は、位置指定だけで全画面幅を救えるとは限らない。実際のスマホ幅でも、必要な情報が見えているか確認しよう。

選ぶ基準は「余白を許せるか」だけではない

商品全体や資料の端を見せたいならcontain、装飾的な一覧写真で枠を埋めたいならcoverが候補になる。画像に本文に必要な文字がある場合、coverで隠してよいかを先に判断してね。

仕様はMDNのobject-fitで確認できる。作例では表示方式を切り替えるだけで、元画像の書き換えや外部への送信は行わないよ。