CSS 圖片填滿 div 不變形：object-fit: cover 用法與固定比例寫法

做作品集、商品列表、文章卡片時，最常遇到的問題是：每張圖片的尺寸都不一樣，放進同樣大小的框框裡，不是被拉扁、拉長，就是上下左右留白，整排看起來參差不齊。

用 CSS 的 object-fit，可以讓圖片自動填滿框框、多出來的部分裁掉，而且不會變形。

最常用的寫法

.thumb {
  width: 100%;
  height: 240px;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="thumb">
  <img src="photo.jpg" alt="作品照片">
</div>

object-fit: cover 的意思是：等比例放大或縮小圖片，直到把框框完全蓋滿，超出框框的部分會被裁掉。圖片不會變形，框框也不會留白。

cover、contain 差在哪？

object-fit 常用的值有這幾個：

• cover：填滿框框，多的裁掉。適合照片、縮圖、橫幅。
• contain：整張圖完整放進框框，不裁切，比例不同時會留白。適合 Logo、商品去背圖、圖表這類不能被切到的圖。
• fill（預設值）：強制拉成框框的大小，比例不同時圖片會變形。
• none：維持原始大小，超出的部分被切掉。

調整裁切的焦點：object-position

cover 預設是保留圖片正中間。如果照片的重點在上方（例如人物的臉），被裁掉就可惜了，可以用 object-position 指定要保留的位置：

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* 保留上方 */
}

也可以用百分比微調，例如 object-position: 50% 30%;。

不想寫死高度？用 aspect-ratio 固定比例

在 RWD 響應式網頁裡，框框的寬度會隨螢幕變化，寫死高度反而不好看。用 aspect-ratio 固定比例，高度就會跟著寬度自動算：

.thumb {
  aspect-ratio: 4 / 3; /* 也常用 16 / 9、1 / 1 */
  overflow: hidden;
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

這樣不論手機或電腦，每張縮圖都是一樣的 4:3，整排卡片會非常整齊。

另一種做法：背景圖

也可以把圖片當成背景，用 background-size: cover 達到一樣的效果：

.banner {
  aspect-ratio: 16 / 9;
  background-image: url("photo.jpg");
  background-size: cover;
  background-position: center;
}

不過背景圖沒有 alt 替代文字，搜尋引擎和螢幕報讀軟體都不容易理解它的內容。內容相關的照片（作品、商品、文章配圖）建議用 <img> 加 object-fit；純裝飾性的圖案才用背景圖。

舊文章裡的絕對定位寫法還需要嗎？

這篇文章早期的版本，另外介紹了一種用 position: absolute 加 min-width、min-height 和 transform 的寫法，是為了相容不支援 object-fit 的 IE 瀏覽器。IE 已經在 2022 年正式停止支援，現在所有瀏覽器都支援 object-fit，直接用上面的寫法就好，不需要再寫那麼複雜的相容寫法。

常見問題

加了 object-fit 沒效果？

object-fit 要在圖片本身有設定寬高的情況下才有作用。如果圖片是 height: auto，它會照原比例長高，當然不會被裁切。確認 img 有 width: 100% 和 height: 100%，外層也要有明確的高度或 aspect-ratio。

圖片下方多了一條小縫？

圖片預設是行內元素，會留出文字基線的空間。給圖片加上 display: block 就會消失。

延伸閱讀

• CSS div 置中完整整理：水平置中、垂直置中的 6 種寫法
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學

作品集、商品列表的圖片整不整齊，會直接影響訪客對品牌的第一印象。正威網路行銷提供基隆網頁設計與客製化網站服務，也服務台北與全台客戶，歡迎來聊聊。