Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

object-fit

概要

CSS の object-fit プロパティは、置換要素の内容物を、自身が使用する高さおよび幅によって形作られるボックスへどのようにはめ込むかを指定します。

初期値fill
適用対象replaced elements
継承継承する
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* キーワード値 */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

/* グローバル値 */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

fill
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクトの実際のサイズは、要素の幅および高さの使用値です。
contain
置換コンテンツは要素のコンテンツボックス内にぴったり合うサイズになりますが、アスペクト比を維持します。オブジェクトの実際のサイズは、要素の幅および高さに対する contain 制約で決められます。
cover
置換コンテンツは要素のコンテンツボックス全体を埋めるサイズになりますが、アスペクト比を維持します。オブジェクトの実際のサイズは、要素の幅および高さに対する cover 制約で決められます。
none
置換コンテンツは、要素のコンテンツボックスの中でリサイズしません。オブジェクトの実際のサイズは、サイズ指定がない場合のデフォルトのアルゴリズムを使用して決められます。また、デフォルトのオブジェクトサイズは、置換要素の幅および高さの使用値と一致します。
scale-down
コンテンツは none または contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

形式文法

fill | contain | cover | none | scale-down

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 Image Values and Replaced Content Module Level 4
object-fit の定義
草案 from-image および flip キーワードを追加。
CSS Image Values and Replaced Content Module Level 3
object-fit の定義
勧告候補 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 31.0 36 (36) 未サポート 11.60-o
19.0
(有)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 4.4.4 36 (36) 未サポート 11.5-o
24
(有)

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,