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