CSS3 object-fit 属性浅析示例

object-fit は、画像や動画などの置き換え要素が、その親要素の枠内でどのように表示されるか（サイズ調整やトリミング）を指定するCSSプロパティです。

CSS3のobject-fit属性の簡単な解説

object-fit は、置き換え要素（例えば <img>, <video>, <canvas>）のコンテンツがそのコンテナ内でどのようにフィットするかを指定するためのプロパティです。
要素の枠内での画像や動画の表示方法を制御します。

文法

object-fit: fill | contain | cover | none | scale-down;

• fill（デフォルト）：コンテンツがコンテナいっぱいに引き伸ばされ、変形する場合があります。
• contain：コンテンツは縦横比を保ってコンテナ内に完全に収まりますが、余白ができることがあります。
• cover：コンテンツは縦横比を保ってコンテナを覆い尽くしますが、一部が切り取られる可能性があります。
• none：コンテンツは元のサイズのまま表示されます。拡大縮小されません。
• scale-down：none と contain のうち、小さい方のサイズで表示されます。

サンプル

html

<div class="container">
  <img src="https://via.placeholder.com/300x200" alt="サンプル画像" />
</div>

CSS：

.container {
 width: 200px;
 height: 150px;
 border: 1px solid #ccc;
 overflow: hidden;
}

.container img {
 width: 100%;
 height: 100%;
 object-fit: cover; /* 他の値に変更して効果を試せます */
}

さまざまなobject-fitの値を試してみましょう

注意点・補足

• object-fit は <img>, <video>, <canvas> など置き換え要素でのみ有効。
• Internet Explorer は対応していないため、IE対応が必要な場合は別途対策が必要。
• 要素の幅・高さを指定した状態で使用すると効果が分かりやすい。
• 変形（歪み）を防ぎたい場合は fill は避け、contain または cover を使うのが良い。

Web制作現場でよくある質問（FAQ）

Q1: object-fitとbackground-sizeの違いは？

A1: object-fit は <img> などの置き換え要素に使い、画像の表示方法を制御する。一方、background-size は背景画像に対して適用する。

Q2: IEでの対応方法は？

A2: IE非対応のため、JavaScriptでの代替処理や背景画像を使う方法が一般的。

IEに対応したcover効果の実装

.container img{		
	max-width: 1000%;
	max-height: 100%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
}

Q3: object-fit: scale-down はどういう時に使う？

A3: 画像がコンテナより大きい時だけ縮小し、小さい時は元サイズのまま表示したい場合に便利。

まとめ（まとめ）

object-fit は画像や動画の表示制御に非常に便利なプロパティ。

contain は全体表示、cover はトリミングしてコンテナいっぱいに表示するのに適している。

ブラウザサポートを考慮して使い分けよう。