CSS object-fit 屬性

CSS object-fit 屬性用於指定 <img> 或 <video> 如何調整大小以適應其容器。

CSS object-fit 屬性

CSS object-fit 屬性用於指定 <img> 或 <video> 如何調整大小以適應其容器。

此屬性透過多種方式告訴內容填充容器，例如“保留寬高比”或“拉伸並佔據儘可能多的空間”。

看下面這張來自巴黎的圖片。這張圖片寬 400 畫素，高 300 畫素。

但是，如果我們給上面的圖片設定寬度為原來的一半（200 畫素），高度不變（300 畫素），它看起來會是這樣：

我們看到圖片被壓扁以適應 200x300 畫素的容器（其原始寬高比被破壞了）。

這就是 object-fit 屬性的用武之地。 object-fit 屬性可以取以下值之一：

• fill - 這是預設值。圖片將被調整大小以填充指定尺寸。如有必要，圖片將被拉伸或壓縮以適應。
• contain - 圖片保持其寬高比，但會調整大小以適應指定尺寸。
• cover - 圖片保持其寬高比並填充指定尺寸。圖片將被裁剪以適應。
• none - 圖片不會被調整大小。
• scale-down - 圖片將被縮小到 none 或 contain 的最小版本。

使用 object-fit: cover;

如果我們使用 object-fit: cover;，圖片將保持其寬高比並填充指定尺寸。圖片將被裁剪以適應。

使用 object-fit: contain;

如果我們使用 object-fit: contain;，圖片將保持其寬高比，但會調整大小以適應指定尺寸。

使用 object-fit: fill;

如果我們使用 object-fit: fill;，圖片將被調整大小以填充指定尺寸。如有必要，圖片將被拉伸或壓縮以適應。

使用 object-fit: none;

如果我們使用 object-fit: none;，圖片不會被調整大小。

使用 object-fit: scale-down;

如果我們使用 object-fit: scale-down;，圖片將被縮小到 none 或 contain 的最小版本。

另一個示例

這裡我們有兩個圖片，我們希望它們填充瀏覽器視窗寬度的 50%，高度的 100%。

在下面的示例中，我們 **不** 使用 object-fit，因此當我們調整瀏覽器視窗大小時，圖片的寬高比將被破壞。

示例

自己動手試一試 »

在下一個示例中，我們使用 object-fit: cover;，因此當我們調整瀏覽器視窗大小時，圖片的寬高比得以保留。

示例

自己動手試一試 »

 CSS object-fit 更多示例

下面的示例在一個示例中演示了 object-fit 屬性的所有可能值。

CSS Object-* 屬性

下表列出了 CSS object-* 屬性。