CSSで画像を枠いっぱいに切り抜いて表示するには
width と height を指定した img は既定では引き伸ばされて元の縦横比が崩れる。
object-fit: cover を与えると、比を保ったまま枠を覆い、はみ出した部分だけが切り取られる。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<div class="fit-row">
<figure>
<img class="thumb thumb--fill" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Crect%20width='240'%20height='240'%20fill='%230f766e'/%3E%3Ccircle%20cx='120'%20cy='120'%20r='86'%20fill='%235eead4'/%3E%3C/svg%3E" alt="">
<figcaption>fill（既定）</figcaption>
</figure>
<figure>
<img class="thumb thumb--cover" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Crect%20width='240'%20height='240'%20fill='%230f766e'/%3E%3Ccircle%20cx='120'%20cy='120'%20r='86'%20fill='%235eead4'/%3E%3C/svg%3E" alt="">
<figcaption>cover</figcaption>
</figure>
<figure>
<img class="thumb thumb--contain" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Crect%20width='240'%20height='240'%20fill='%230f766e'/%3E%3Ccircle%20cx='120'%20cy='120'%20r='86'%20fill='%235eead4'/%3E%3C/svg%3E" alt="">
<figcaption>contain</figcaption>
</figure>
</div>.fit-row {
display: flex;
justify-content: center;
gap: 10px;
font-family: system-ui, sans-serif;
}
.fit-row figure {
/* 3 枚を等幅で並べ、枠の幅は画面幅に追従させる */
flex: 1 1 0;
min-width: 0;
max-width: 170px;
margin: 0;
}
.thumb {
/* 3 枚とも中身は同じ正方形の画像で、枠だけが横長になっている */
width: 100%;
aspect-ratio: 3 / 2;
display: block;
border-radius: 6px;
background: #e4e4e7; /* contain の余白が見えるように敷いておく */
}
.thumb--fill {
object-fit: fill; /* 既定値。枠に合わせて引き伸ばすので円が楕円になる */
}
.thumb--cover {
object-fit: cover; /* 比を保ったまま枠を覆い、はみ出した分は切り取る */
}
.thumb--contain {
object-fit: contain; /* 比を保ったまま枠に収める。余った側に余白が残る */
}
.fit-row figcaption {
margin-top: 6px;
font-size: 12px;
color: #52525b;
text-align: center;
}object-fit は、img や video の中身を枠に対してどう収めるかを決めるプロパティである。
サムネイルのように枠の大きさを揃えたい場面では、既定の fill だと元の比を無視して引き伸ばされるため、比を保ったまま枠を埋める cover を指定する。
つまずき
object-fit を書いたのに何も変わらない場合は、img の枠の大きさが確定しているかを確かめるとよい。
object-fit は「与えられた枠に対して中身をどう収めるか」を決めるプロパティなので、枠が中身なりに決まっている状態では働く余地が無い。
上の例で .thumb に width: 100% と aspect-ratio: 3 / 2 を与えて枠を先に確定させているのはこのためである。
また object-fit は img や video といった置換要素に対するプロパティで、背景画像には効かない。
背景側で同じことをしたいときは background-size: cover を使う。
どこを残すかを指定する
cover は既定では中央を基準に切り抜くため、被写体が上や下に寄っている画像では顔や見出しが切れてしまうことがある。
残したい位置は object-position で指定でき、object-position: top と書けば上端を基準に切り抜かれる。
background-position と同じ書式なので、50% 20% のような数値やパーセントでも指定できる。
cover と contain の使い分け
cover は枠を必ず埋める代わりに画像の一部が失われ、contain は画像全体を必ず見せる代わりに枠に余白が残る。
一覧のサムネイルのように見た目の揃いを優先する場面では cover、ロゴや図版のように欠けてはいけない画像では contain を選ぶ。
contain を使うときは余白の色が背景として見えるので、上の例のように枠側へ background を敷いておくと収まりがよい。
なお枠そのものの縦横比を揃えたい場合は aspect-ratio が使えるので、そちらのサンプルも参照するとよい。