CSS object-fit 屬性
定義和用法
object-fit
屬性用於指定 <img> 或 <video> 如何調整大小以適應其容器。
此屬性指示內容以多種方式填充容器;例如“保持縱橫比”或“拉伸並佔用儘可能多的空間”。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS 語法
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
屬性值
值 | 描述 | 演示 |
---|---|---|
fill | 這是預設值。替換的內容尺寸會調整以填充元素的content box。如有必要,物件將被拉伸或擠壓以適應 | 演示 ❯ |
contain | 替換的內容會按比例縮放以保持其縱橫比,同時適應元素Entire content box。物件將被裁剪以適應 | 演示 ❯ |
cover | 替換的內容的尺寸會按比例縮放以保持其縱橫比,同時填充元素的 Entire content box。物件將被裁剪以適應 | 演示 ❯ |
none | 替換的內容不會被調整大小 | 演示 ❯ |
scale-down | 內容尺寸的計算方式與指定 none 或 contain 相同(會導致一個更小的具體物件尺寸) | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程:CSS object-fit
CSS 參考:CSS object-position
HTML DOM 參考:objectFit 屬性