“object-fit”プロパティ:置換要素のコンテンツのはめ込み

概要

“object-fit”プロパティは置換要素のコンテンツをどのようにボックスにはめ込むかを指定するプロパティです。

“img”要素や“video”要素などの置換要素が生成するボックスの中にどのようにそのコンテンツをはめ込むかを指定します。特に“width”プロパティや“height”プロパティなどで大きさが指定されていてアスペクト比がオブジェクトの自然アスペクト比と異なる場合に置換要素のコンテンツがどのように描画されるかが変わります。

置換要素のコンテンツが要素のコンテント・ボックスを完全に覆わない場合、余った空間には要素の背景色が表示されます。置換要素のコンテンツがコンテント・ボックスよりも大きくなる場合にはコンテント・ボックスからはみ出すことはなく、はみ出す部分は常に切り取られます。

サンプルコード

img { object-fit: cover;}


値

仕様書

定義されている仕様書

object-fit

fill
contain
cover
none
scale-down

アスペクト比を維持せず拡大・縮小する

img {

object-fit: fill;
border: 2px solid;

}

アスペクト比を維持して拡大・縮小する

img {

object-fit: contain;
border: 2px solid;

}

img {

object-fit: cover;
border: 2px solid;

}

img {

object-fit: scale-down;
border: 2px solid;

}

コンテンツを拡大・縮小しない

img {

object-fit: none;
border: 2px solid;

}