object-fitは、画像や動画を指定サイズの枠にどう収めるかを決めるCSSです。カード画像、アイキャッチ、プロフィール画像などで便利ですが、「指定したのに効かない」と感じる場面も多いです。
この記事では、object-fitが効かない原因を5つに分けて、すぐ使えるHTML/CSSサンプル付きで整理します。
object-fitは何に効く？
object-fitは、img、video、iframeなどの置換要素に対して、コンテンツの収まり方を指定します。背景画像に対しては効かないため、背景にはbackground-sizeを使います。
<section class="gallery">
<figure class="photo-card">
<img
src="https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=900&q=80"
alt="バスケットボール"
>
<figcaption>object-fit: cover</figcaption>
</figure>
<figure class="photo-card">
<img
src="https://images.unsplash.com/photo-1519861531473-9200262188bf?auto=format&fit=crop&w=900&q=80"
alt="バスケットコート"
>
<figcaption>object-positionで見せ場を調整</figcaption>
</figure>
</section>.photo-card img {
width: 100%;
object-fit: cover;
}.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 20px;
}
.photo-card {
margin: 0;
border: 2px solid #111;
background: #fff;
}
.photo-card img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}
.photo-card figcaption {
padding: 12px 14px;
font-weight: 700;
}原因1：画像の高さが決まっていない
object-fitは、画像を枠にどう収めるかの指定です。高さや比率が決まっていないと、そもそも収める枠がありません。heightまたはaspect-ratioを指定します。
.thumbnail img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
原因2：背景画像に使っている
object-fitはbackground-imageには効きません。背景画像をトリミングしたい場合は、background-size: coverとbackground-positionを使います。
.hero {
background-image: url("image.jpg");
background-size: cover;
background-position: center;
}
原因3：imgではなく親要素に指定している
object-fitは画像そのものに指定します。親のfigureやdivに書いても効きません。親にはサイズやoverflowを、画像にはobject-fitを指定します。
原因4：display:inlineの隙間を崩れと勘違いしている
imgは初期状態でinline要素なので、下に少し余白が出ることがあります。トリミングが効いていないように見える場合は、display: blockを入れて確認しましょう。
.photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
原因5：見せたい位置を調整していない
object-fit: coverは枠いっぱいに表示するため、画像の一部を切り取ります。顔や商品、ボールなど見せたい位置が端にある場合は、object-positionで調整します。
.photo img {
object-fit: cover;
object-position: 50% 35%;
}
CodePen埋め込み用エリア
CodePenでは、上のindex.htmlをHTMLパネルへ、bad.cssとgood.cssをCSSパネルへ貼り替えてください。aspect-ratioを外した状態と入れた状態の違いを見ると、原因がかなり分かりやすいです。
まとめ
object-fitが効かないときは、対象が画像か、サイズが決まっているか、親ではなく画像に指定しているかを確認しましょう。カード画像では、display: block、width: 100%、aspect-ratio、object-fit: coverを基本セットにすると安定します。
