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