網頁常見錯誤的之一：圖片比例變形

當網頁有此錯誤時，會大大的降低網頁的畫面水平，如果是作為一個求職作品，也會被貼上 “不細心” 的標籤，本篇介紹幾種簡單的方式來解決此問題。

以下是原始圖片（圖片來自於 Unsplash，如果失連歡迎與我聯絡）。

常見的錯誤就是將 img 標籤限制了高度，卻又設定了 100% 寬度，導致圖片的比例變形（下圖會隨著不同裝置有不同的比例問題，本文在桌面版可以看到最明顯的錯誤）。

使用背景圖

這是相對支援度較高的做法，將 img 中的圖片改為使用 background-image 來呈現，並使用 background-size: cover; 的方式來限制顯示區域，同時也可搭配 background-position 來調整圖片的顯示位置。

原始碼參考如下，可搭配 background-position 來調整背景圖的位置（預設是圖片的左上方）；簡單易用，且有不錯的瀏覽器相容性。

.background-cover {
  background-position: center center;
  background-size: cover;
}

background-size: cover; 可以讓背景圖盡可能覆蓋整個區域，此做法也會裁切掉部分圖片，因此要特別注意到保留的區塊是否為圖片的主題；如果圖片主題被裁切可試著改變 background-position 屬性；當無法正確呈現主題會建議替換其它圖片，或採用其它的排版方式。

圖片裁切概念，會盡可能將圖片覆蓋整個區域，超出區域的部分將會被裁切。

使用 img 標籤搭配 object-fit

此作法概念與上述相同，但可保留 img 的特性（可以加上 alt 以及較好的 SEO）。

object-fit 是決定圖片填滿方式的屬性，用法與 background-size 相當類似，僅不過是套用上 img 專屬的屬性。另外，它不支援 IE11。

.object-cover {
  object-fit: cover;
}

預設來說它的定位是在圖片的正中央，定位也可透過 object-position 來進行調整。

.object-bottom {
  object-position: right bottom;
}

過去，大多會推薦使用 background-size 來解決圖片比例變形的問題，因為很難預期觀看者是否會使用 IE11 來檢視你的網頁，隨著微軟公布不再支援 IE11，開發者可以盡情地開始使用 object-fit 屬性了。