CSS中object-fit屬性cover和fill的圖像適配區別

Object-fit的fill和cover區別在于圖片適配方式：1. fill會拉伸圖片填滿容器，可能導致變形；2. cover保持圖片比例并裁剪多余部分。fill適用于不介意變形且需完全填充的場景，cover適合要求圖片不變形且可接受裁剪的情況。選擇時結合具體需求，并可配合object-position調整顯示重點。

在css中，object-fit屬性常用于控制圖片在容器中的顯示方式。其中cover和fill是兩個常用的值，但它們的圖像適配行為有明顯區別，選錯可能導致圖片變形或者展示不全。

object-fit: fill 會拉伸填充容器

當你設置object-fit: fill時，瀏覽器會強制把圖片拉伸到完全填滿容器，不管圖片本身的寬高比如何。

• 圖片會被壓縮或拉長，以適應容器的尺寸
• 容易導致圖片看起來“變形”，特別是當容器和圖片比例差異較大時

舉個例子：一張16:9的圖片放進一個正方形容器里，用fill的話，圖片的高度會被壓縮，畫面可能變得怪怪的。

立即學習“前端免費學習筆記（深入）”；

object-fit: cover 保持比例，裁剪多余部分

相比之下，object-fit: cover更常用，它的核心邏輯是：

• 保持圖片原始比例
• 縮放圖片，讓圖片完全覆蓋容器
• 如果比例不一致，超出的部分會被裁剪掉

這樣做的好處是圖片不會變形，而且能保證容器被填滿。適合做背景圖、卡片封面等場景。

比如你在一個正方形頭像框里使用一張豎版人像照片，cover會自動居中放大，左右兩邊可能會被裁掉一些，但整體看起來自然。

怎么選擇？根據需求決定

選fill還是cover，其實取決于你的使用場景：

• ? 想要圖片完整填滿容器，不介意輕微變形 → 用fill
• ? 希望圖片不變形，可以接受部分裁剪 → 用cover

另外，也可以結合object-position來調整圖片在容器中的位置，比如想讓封面圖重點顯示人物臉部而不是邊緣，就可以配合這個屬性調整。

基本上就這些。這兩個值看似差不多，但在視覺呈現上差別挺大，用的時候稍微注意一下比例和內容重點，就能避免很多顯示問題。

以上就是CSS中object-fit屬性cover和fill的圖像適配