object-fitのcontainとcoverは画像全体を見せるか枠全体を埋めるかで使い分ける

大きさの違う画像を同じ枠へ並べる場合、画像全体を見せるならobject-fit: contain、余白を作らず枠全体を埋めるならobject-fit: coverを使います。どちらも元画像の縦横比を保ちますが、containは枠内に空きができ、coverは画像の一部が枠の外で切れる場合があります。

最初に決めるのはpropertyではなく、画像の役割です。商品全体を確認させる画像と、一覧の形をそろえるためのthumbnailでは、欠けてよい範囲が違います。

containは画像全体を枠内へ収める

W3CのCSS Image Values and Replaced Content Module Level 3は、containを、元の縦横比を保ちながら、幅と高さの両方が枠を超えない最大の大きさへ収める値として定義しています。

.product-image {
  width: 240px;
  height: 160px;
  object-fit: contain;
}

縦長の画像を横長の枠へ入れると、左右に空きができます。横長の画像なら、上下に空きができます。画像全体が必要な商品写真、図、文字を含む画像では、空きを許しても内容を欠かさない方を優先します。

空いた部分には、要素のbackgroundが見えます。画像に合わせて枠の色を変えるのか、site共通のbackgroundを使うのかも一緒に決めてください。

coverは枠全体を埋めて余る部分を切る

coverは、元の縦横比を保ちながら、画像の幅と高さが枠を覆う最小の大きさにします。枠に空きはできませんが、画像の長い側が枠からはみ出します。

.article-thumbnail {
  width: 240px;
  height: 160px;
  object-fit: cover;
}

記事一覧や人物写真のthumbnailなど、枠の形をそろえることを優先する場面に向きます。ただし、端にある顔、文字、商品が切れる画像には使えません。見栄えではなく、切れても意味が変わらないかで判断します。

用途は説明用の目安です。商品写真でも一覧の比較を優先する場合があり、thumbnailでも文字を欠かせない場合があります。画像ごとの目的を確認してください。

枠のwidthとheightを先に決める

object-fitは、要素に使われるwidthとheightで作られた枠へ、画像内容をどう収めるかを指定します。枠の寸法が決まっていなければ、何に対してcontainまたはcoverするのかが定まりません。

.card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

この例は、cardの幅に合わせ、高さを180pxにそろえる仮例です。実際の高さは、表示する文字量、列数、画面幅、元画像の比率を見て決めます。desktopでそろっていても、mobileで過度に縦長または低くならないかを確認します。

object-positionで切り取る中心を動かす

coverで画像が切れる場合、object-positionで枠内の位置を指定できます。初期位置は中央の50% 50%です。

.portrait {
  width: 240px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 20%;
}

この仮例は、画像を中央より上へ寄せます。顔が上部にある画像では有効な場合がありますが、すべての画像へ同じ値を適用すると、別の画像で重要部分が切れます。共通classで管理する値と、画像ごとに調整する値を分けます。

background-sizeのcoverと対象が違う

object-fitは、imgなどのreplaced elementの内容を、その要素の枠へ収めます。一方、background-sizeは、要素のbackground imageをbackground positioning areaへ配置します。

名前が同じcontainとcoverでも、HTMLで意味を持つ画像を扱うのか、装飾用のbackgroundを扱うのかが違います。内容として必要な画像を、配置の都合だけでbackgroundへ移すと、altによる代替内容を持たせにくくなります。画像の意味と表示方法を分けてください。

対応browserを決めてから採用する

W3C文書では、object-fitとobject-positionはCandidate Recommendationに含まれる一方、実装状況によって変更または除外され得る機能として挙げられています。仕様に記載されていることと、対象browserで安定して表示できることは別です。

採用前に、運用対象とするbrowserとversionを決め、少なくとも次を確認します。

• containで画像全体が表示されるか
• coverで枠に空きが残らないか
• object-positionの指定位置が反映されるか
• 非対応時に画像が読めない形へ崩れないか

制作会社へ実装を依頼する場合は、対応browser、枠の寸法、画像の欠けを許す範囲、非対応時の表示を納品条件へ残します。CSSを書いたことと、運用で追加される画像が同じ条件を満たすことは別です。

最初の一手は、縦長、横長、正方形の仮画像を一枚ずつ同じ枠へ入れ、containとcoverを切り替えることです。三枚すべてで、空きと欠けのどちらを許せるかを確認してください。