object-fit
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
CSS の object-fit プロパティは、置換要素、例えば <img> や <video> などの中身を、コンテナーにどのようにはめ込むかを設定します。
要素のボックス内における置換要素の中身のオブジェクトの配置を変更するには、 object-position プロパティを使用することができます。
試してみましょう
object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; <section id="default-example"> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/plumeria-146x200.jpg" /> </section> #example-element { height: 100%; width: 100%; border: 2px dotted #888; } 構文
object-fit: contain; object-fit: cover; object-fit: fill; object-fit: none; object-fit: scale-down; /* グローバル値 */ object-fit: inherit; object-fit: initial; object-fit: revert; object-fit: revert-layer; object-fit: unset; object-fit プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。
値
contain-
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
cover-
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
fill-
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
none-
置換コンテンツは、拡大縮小されません。
scale-down-
コンテンツは
noneまたはcontainを指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
公式定義
| 初期値 | fill |
|---|---|
| 適用対象 | 置換要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
object-fit =
fill |
none |
[ contain | cover ] || scale-down
例
画像に object-fit を設定
HTML
<section> <h2>object-fit: fill</h2> <img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: contain</h2> <img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: cover</h2> <img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: none</h2> <img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: scale-down</h2> <img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> </section> CSS
h2 { font-family: Courier New, monospace; font-size: 1em; margin: 1em 0 0.3em; } img { width: 150px; height: 100px; border: 1px solid #000; margin: 10px 0; } .narrow { width: 100px; height: 150px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } 結果
仕様書
| Specification |
|---|
| CSS Images Module Level 3 # the-object-fit |
ブラウザーの互換性
関連情報
- その他の画像関連 CSS プロパティ:
object-position,image-orientation,image-rendering,image-resolution background-size