Style objectFit属性

定義と使用法

objectFit 属性は<img>や<video>のサイズをコンテナに合わせる方法を指定します。

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

他にも参照してください：

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

CSSリファレンスマニュアル：object-fit属性

例

画像の両側を切って、アスペクト比を保ちつつスペースを埋めます：

document.getElementById("myImg").style.objectFit = "cover";

実際に試してみましょう

文法

objectFit属性の返り値：

object.style.objectFit

objectFit属性の設定：

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

属性値

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

技術的詳細

デフォルト値： fill
返り値： 文字列で、要素の object-fit属性。
CSSバージョン： CSS3

ブラウザのサポート

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

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