w3-notes logo

cocochido

HTML/CSSリファレンス

object-fitプロパティ

inheritance
継承不可
animation type
離散的な(50%の位置で入れ替わる)アニメーション。

説明

置換要素をコンテンツ領域の大きさに適合させる方法を指定します。
関連項目

使用例

出力結果

構文
syntax help

object-fit: fill | contain | cover | none | scale-down ;
fill
[規定値] オブジェクトが要素のコンテンツ領域全体を占めるように、オブジェクトの幅と高さをそれぞれ拡大・縮小します。
contain
オブジェクトが要素のコンテンツ領域に収まるように、アスペクト比を保ったままオブジェクトを拡大・縮小します。
cover
オブジェクトが要素のコンテンツ領域全体を占めるように、アスペクト比を保ったままオブジェクトを拡大・縮小します。
none
オブジェクトの拡大・縮小を行いません。
scale-down
オブジェクトが要素のコンテンツ領域に収まるときはnone、コンテンツ領域からはみ出すときはcontainにより縮小されるのと同等になります。

ブラウザ対応状況

object-fit
IE
Edge
Firefox
Chrome
Safari
Opera
iOS Safari
Chrome for Android
Firefox for Android
16
36
31
10
19
11.6
10
31
36
11
81
76
81
13.1
68
13.4
81
68
Support data for this feature provided by
 
サポート
 
部分サポート
 
非サポート
 
不明
最終更新日: 2021-02-24
© 2020 ここちい堂. All rights reserved.