object-fit 介紹

在網頁開發中，我們常常需要在背景中加入圖片來增添美感或呈現特定風格。以往，我們通常會使用 CSS 的 background 屬性來實現這個效果。然而，現在有一個更簡單且強大的方法可以實現相同的效果，那就是使用 object-fit 屬性。在本篇文章中，我將向大家介紹如何使用 object-fit 屬性來取代 CSS 的 background 語法，輕鬆實現圖片背景的效果。

在實際應用中，我們可以利用 object-fit 屬性來製作各種不同的圖片效果。相較於使用 background 語法，改用 object-fit 可以對 SEO 更友好，也能適當的設定 alt 語法，讓大家在搜尋圖片時，也能更快速的搜尋到你的網站喔！

object-fit 應用之「圓形頭像」

以往，我們在呈現網站頭像時，會希望使用者上傳 1:1 的圖片檔，方便我們做成圓形的頭像。

▼ 如果上傳 1:1 的頭像，可以非常快速的做成圓形頭像

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

但不是所有使用者，都會隨身準備 1:1 的頭像，甚至也不知道該怎麼提供。

因此為了不讓圖片比例跑掉，我們可以改用 background-image: cover 等語法，將圖片至於正中央並維持等比例顯示。

但如同前述所言，為了美觀而捨棄了 SEO (搜尋引擎搜尋不到這張頭像)，好像有點本末倒置。

▼ 所以我們可以改用 object-fit ，實現圖片(非背景圖片)的等比例設計

<div class="avatar-container">
  <img src="https://i.imgur.com/WFCuRfz.png" alt="Avatar" class="avatar">
</div>

.avatar-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

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

object-fit 應用之「整齊的縮圖排列」

用上面的例子繼續做延伸，假設今天有許多長寬不一的圖片，但我們希望他能排列整齊，一樣使用 object-fit 輕鬆幫我們達成：

<section>
  <div class="flex">
    <div class="avatar-container">
      <img src="https://i.imgur.com/WFCuRfz.png" alt="Avatar" class="avatar">
    </div>
    <div class="avatar-container">
      <img src="https://i.imgur.com/0Eb7dZz.jpeg" alt="Avatar" class="avatar">
    </div>
    <div class="avatar-container">
      <img src="https://i.imgur.com/hETzUq5.png" alt="Avatar" class="avatar">
    </div>
    <div class="avatar-container">
      <img src="https://i.imgur.com/gstfLGl.jpeg" alt="Avatar" class="avatar">
    </div>
  </div>
</section>

object-fit 應用之「Banner 底圖 + 文字」

這個應用最常見的是在形象網站的首頁，一個大大的 Banner 底圖，上面蓋著文字。

以往習慣用背景圖片做 Banner 底圖，但假使有一天，老闆希望這一張大 Banner 也能被搜尋到的話，該怎麼調整呢？

▼ 我們可以直接把這張 Banner 變成圖片

object-fit 應用之「圖片對比 / 圖片替換輪播」

最後分享一個我近期製作的圖片效果，將滑鼠移到圖片上，可以看到圖片慢慢從灰階變成彩色，滑鼠移出後會變成灰階圖片。

這個概念非常靈活，可以延伸應用在許多情境上。例如，你可以用它來實現時下流行的圖片對比效果，或是製作圖片輪播功能。一旦你理解了這個概念，就能在各種場景中巧妙運用它。

▼ 不過要特別記住，假設想要使用這個效果，必須移除 img 的 max-width，不然會有問題。

img {
  max-width: 100%;
}

瀏覽器支援

最後放上支援 object-fit 的瀏覽器一覽，給大家參考。如果不考慮 IE11 的話，可以考慮使用，畢竟連 Edge 也有支援唷！

同場加映：object-position

caniuse 網站把 object-fit 以及 object-position 放在一起，那什麼是 object-position 呢？簡單來說，就跟 background-position 一樣，可以調整圖片的定位。

可以試著在我上面的範例，加上 object-position

.img--overlay img {
  object-fit: cover;
  object-position: 20px 20px; /* 加入這一行，用法同樣是 x y 定位*/
}

▼ 可以看到疊在上面的彩色圖片位移了。

結語

以上是利用 object-fit 屬性實現的圖片應用範例。這些範例展示了使用 object-fit 屬性的不同應用場景，你可以根據自己的需求進行修改和調整。

總結來說，object-fit 屬性提供了一個簡單且靈活的方式，讓我們能夠輕鬆實現圖片背景的效果，同時保持圖片的寬高比和裁剪方式。使用這個屬性，我們可以避免冗餘的 CSS 語法，提高代碼的可讀性和維護性。

希望本篇文章對你在網頁開發中的圖片應用有所幫助。如果你有任何問題或建議，歡迎在下方留言，我將竭誠為你解答！

23

發生錯誤。