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