不再被圖片比例綁架：用 object-fit 解放排版

object-fit 的核心價值

切版時，想要讓圖片在容器內保持漂亮的裁切或完整展示，常見的做法是把圖片放入背景圖 background-image 來處理。

這種做法雖然可以達到效果，但是卻犧牲了語意例如：alt、SEO、Lazy loading、srcset 等功能。

object-fit 的出現，讓我們可以直接對 <img> 縮放與裁切，而不失語意。

語法及設定

.card-photo {
  width: 100%;
  height: 300px;
  object-fit: cover;        /* 圖片適配方式 */
  object-position: center;  /* 裁切焦點位置 */
}

常見 object-fit 值說明

• fill：預設值，圖像被拉伸或擠壓來填滿容器，可能導致比例變形
• contain：完整顯示內容 (不裁切)，但可能留空白
• cover：保持寬高比例填滿容器，超出部分裁切
• none：不縮放，按照原始尺寸顯示
• scale-down：在 none 和 contain 中以較小的呈現方式

實作情境

使用場景

• 新聞縮圖：讓圖片在卡片框內裁切而不變形
• Banner 圖：讓圖片橫向覆蓋，保持美感
• 影片預覽縮放：在不同裝置大小中維持影像填滿效果

在這些情況下，object-fit: cover 通常是最常被選用的設定，而 contain 則是適合用於希望整張圖片可見、沒有裁切需求的情境。

相容性與適用範圍

主流瀏覽器 (Chrome、Safari、Edge、Firefox) 均已支援 object-fit，在切版開發時可以安心使用。

在使用時需要特別注意的是：

• object-fit 僅適用於替換元素 <img>、<video>、<iframe> 等，對背景圖無效
• 要讓 object-fit 生效，需要為元素或它的父容器設定高度和寬度
• 可以搭配 object-position 使用，讓裁切時焦點落在你想要的位置

結語

使用 object-fit，可以在不犧牲語意的前提下，讓圖片或是影片在各個尺寸的容器裡都能優雅適配、溢出裁切。 這讓設計更具有彈性，也讓開發團隊維護更容易。

在確認目標瀏覽器都支援以後，可以放心把 object-fit 當作圖片排版的第一選擇，也就是「語意 + 美感」兼顧的好幫手。