サイト制作

object-fitのcoverとcontain、写真を切るか全体を見せるかで選ぶ

慈愛妃きづな

2026-11-06

この記事には広告・アフィリエイトリンクが含まれます。

coverは縦横比を保って枠を埋め、はみ出す部分を切ります。containは画像全体を枠内へ収めるため、縦横比が違うと余白が残ります。商品や図の情報を欠かしたくない場合は、見切れを先に確認しましょう。

枠を埋めるcover、全体を入れるcontain

画像カードの高さをそろえるとき、object-fitのcoverとcontainで見え方が変わります。coverは画像の縦横比を保ちながら枠全体を埋め、合わない部分を見切れさせます。containは縦横比を保って画像全体を収め、枠と比率が違う場合は上下や左右に余白が残ります。

どちらも元画像を縦横に引き伸ばさない点は共通です。『余白があるから失敗』ではなく、全体を見せる必要があるかで選びましょう。

一覧の写真をそろえる用途ではcoverが便利ですが、顔、商品の型番、写真内の説明文字などが切れることがあります。見栄えだけでなく、読者が必要とする情報が残るかを確認してください。

商品全体や図表を見せたい場面ではcontainが向く場合があります。余白の色を周囲と合わせる方法もありますが、図そのものの文字が小さすぎないかまで見ておきたいところです。

coverでどこを中心に見せるかは、object-positionで調整できます。中央を基準にしたら被写体が切れる場合、元画像のどこに主役があるかを見て位置を変えます。

この指定は表示の収まり方を変えるもので、元ファイルの容量を減らすものではありません。大きな画像を小さな枠に表示しても、通信量が同じだけ小さくなるとは限らないのです。枠の幅と高さ、縦長・横長の両方の写真、スマホ表示をまとめて確認しましょう。