CSS 參考手冊
object-fit 屬性指定元素的內(nèi)容應(yīng)該如何去適應(yīng)指定容器的高度與寬度。
object-fit 一般用于 img 和 video 標(biāo)簽，一般可以對這些原素進(jìn)行保留原始比例的剪切、縮放或者直接進(jìn)行拉伸等。
您可以通過使用 object-position 屬性來切換被替換元素的內(nèi)容對象在元素框內(nèi)的對齊方式。
| 默認(rèn)值: | fill |
|---|---|
| 繼承: | 無。 |
| 動畫: | 無。 關(guān)于 CSS 動畫 |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.objectFit="cover" 運行代碼 ? |
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
| 值 | 描述 | 運行代碼 |
|---|---|---|
| fill | 默認(rèn)，不保證保持原有的比例，內(nèi)容拉伸填充整個內(nèi)容容器。 | 運行代碼 ? |
| contain | 保持原有尺寸比例。內(nèi)容被縮放。 | 運行代碼 ? |
| cover | 保持原有尺寸比例。但部分內(nèi)容可能被剪切。 | 運行代碼 ? |
| none | 保留原有元素內(nèi)容的長度和寬度，也就是說內(nèi)容不會被重置。 | 運行代碼 ? |
| scale-down | 保持原有尺寸比例。內(nèi)容的尺寸與 none 或 contain 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。 | 運行代碼 ? |
| initial | 設(shè)置為默認(rèn)值，關(guān)于 initial | |
| inherit | 從該元素的父元素繼承屬性。 關(guān)于 inherit |