object-fit

画像や動画を決めた大きさの枠へ収めるプロパティ。全体を見せるか、枠いっぱいに広げるかを切り替えて比べます。

遊んでみよう

画像枠は240px × 180pxで固定

cover

CSS

.element object-fit: cover;

値のパターン

枠への収め方 object-fit

object-fitの構成要素

01contain

全体が見えるように収める

縦横比を保つため、枠と画像の形が違うと上下または左右に余白ができます。

02cover

枠全体を埋める

縦横比を保ったまま広げるため、枠からはみ出す部分は切り取られます。

03fill

枠の幅と高さへ合わせる

初期値です。画像の縦横比と枠の形が違う場合は、中身が引き伸ばされます。

早見表

初期値はfillです。写真の縦横比を保つなら、全体を見せるcontainか、枠を埋めるcoverから選びます。

01fill枠の形へ伸縮初期値

02contain全体を枠内に表示余白あり

03cover縦横比を保って全面表示切り抜き

04none拡大縮小しない元サイズ

05scale-downnoneとcontainの小さい方縮小のみ

よくある使い方

カード画像の大きさを揃える

元画像の縦横比が違っても、固定した枠をcoverで埋めるとカードの並びを揃えられます。

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

商品画像の全体を見せる

切り取らずに全体を見せたい画像は、固定した正方形の枠へcontainで収めます。

.product-image { width: 240px; aspect-ratio: 1; object-fit: contain; }

プロフィール写真を切り抜く

正方形の画像枠をcoverで埋めてから角を丸くすると、元画像を変形させずに顔写真を揃えられます。

.avatar { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }

ポイント

先に画像の枠の大きさを決める。

object-fitの違いを見るには、imgやvideo自体へwidthとheightなどで枠の大きさを指定します。通常のdivの背景画像には効かないため、その場合はbackground-sizeを使います。object-fitはimgやvideoなどの置換要素に適用され、子要素へは継承されません。iframe・embed・fencedframeでは効果がありません。切り抜く位置はobject-positionで調整できます。