讓你不再煩惱圖片尺寸問題，object-fit 與 object-position

真的很好用。

簡述

兩者都是在 CSS3 定義的新屬性，除了 IE 以外大部分瀏覽器都有支援：

這兩個屬性用來設定「置換元素（replaced-element）」中的內容的填滿方式。

💡 註 1：置換元素簡單來說就是可以設定width與height的 inline-level 元素，例如：<img>
💡 註 2：這個置換元素本身必須要有明確的寬跟高，換句話說就是必須有設置width與height才行。

其實你也可以把這兩個屬性當作是翻版的background-size和background-position，概念差不多。

使用方式

我們直接來看怎麼使用吧：

<div class="box">
  <h2 class="title">picture</h2>
  <div class="item">
    <img class="pic" src="image.jpg" />
  </div>
</div>

.pic {
  width: 250px;
  height: 500px;
}

在我們對<img>設定寬高時，圖片會直接按照我們設定的寬高來呈現：

但如你所見，圖片的比例會跑掉，很不好看。

這時候只要加上 object-fit 就可以解決這個問題：

.pic {
  width: 250px;
  height: 500px;
  object-fit: cover;
}

object-fit可以設定的值有這些：

🚀 Codepen：點這裡

補充：

• fill 預設值，代表直接套用設定的寬高。
• none 顯示原始尺寸。
• scale-down 會從 none 跟 contain 裡面挑尺寸比較小的來套用。
• cover contain 跟 background-size 的概念一樣。

至於 object-position 則是用來「調整位置」，跟 background-size 的概念 87 分像，這裡就不再舉例，請各位自己玩玩看，或是直接參考 MDN 中的範例。