CSS の object-fit
プロパティは、置換要素、例えば <img>
や <video>
などの中身を、コンテナーにどのようにはめ込むかを設定します。
要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 object-position
プロパティを使用することができます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
object-fit
プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。
値
contain
- 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
cover
- 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
fill
- 置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
none
- 置換コンテンツは、拡大縮小されません。
scale-down
- コンテンツは
none
又はcontain
を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
形式文法
例
HTML
<div>
<h2>object-fit: fill</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
<h2>object-fit: contain</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
<h2>object-fit: cover</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
<h2>object-fit: none</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
<h2>object-fit: scale-down</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
</div>
CSS
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
出力結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Images Module Level 4 object-fit の定義 |
草案 | |
CSS Images Module Level 3 object-fit の定義 |
勧告候補 | 初回定義 |
初期値 | fill |
---|---|
適用対象 | replaced elements |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 他の画像関連 CSS プロパティ:
object-position
,image-orientation
,image-rendering
,image-resolution
background-size