CSS object-fit 属性

定義と使用法

object-fit 属性は、<img> や <video> のサイズを調整し、コンテナに適応させるために使用されます。

この属性は、内容がどのようにコンテナにフィットするかを示します。例えば「長宽比を保つ」または「広げてできるだけ多くのスペースを占める」です。

も参照してください：

CSS チュートリアル：CSS object-fit

CSS リファレンスマニュアル：CSS object-position

HTML DOM リファレンスマニュアル：objectFit 属性

例

画像の両端をカットし、長宽比を保ちつつスペースを埋めます：

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

実際に試してみてください

CSS 文法

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

属性値

値 説明
fill デフォルト値。置き換えられた内容のサイズを調整し、要素のコンテンツボックスを満たします。必要に応じて、オブジェクトは引張りまたは圧縮されます。
contain 置き換えられた内容を拡大し、その長宽比を保ちつつ、要素のコンテンツボックスにフィットさせます。
cover 置き換えられた内容のサイズを調整し、フィルタリング要素の全体のコンテンツボックスにフィットさせるために、その長宽比を保ちます。オブジェクトはカットされます。
none 置き換えられた内容のサイズは調整されません。
scale-down 内容のサイズは、none または contain のいずれかと同じですが、どちらかが取得するオブジェクトのサイズが小さい方に応じて異なります。
initial この属性をデフォルト値に設定します。参照してください。 initial。
inherit この属性は、親要素からこの属性を継承します。参照してください。 inherit。

技術的詳細

デフォルト値： 個別の属性を参照してください。
継承： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.objectFit="cover"

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0