iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
0
Modern Web

前端常見問題攻略系列 第 26

新手前端也不該犯的錯:圖片變形

  • 分享至 

  • xImage
  •  

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

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

以下是原始圖片(圖片來自於 Unsplash,如果失連歡迎與我聯絡)。

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

https://ithelp.ithome.com.tw/upload/images/20201011/20083608okgKxhMNPb.png

使用背景圖

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

https://ithelp.ithome.com.tw/upload/images/20201011/20083608SxXVFch1l2.png

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

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

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

https://ithelp.ithome.com.tw/upload/images/20201011/20083608VnMrp1e4qp.png

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

使用 img 標籤搭配 object-fit

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

https://ithelp.ithome.com.tw/upload/images/20201011/2008360807uLDNnZob.png

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

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

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

https://ithelp.ithome.com.tw/upload/images/20201011/20083608A2hS1lRFCQ.png

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

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


上一篇
Bootstrap 5 格線的運作原理
下一篇
純 CSS 毛玻璃特效 - backdrop-filter 屬性介紹
系列文
前端常見問題攻略30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言