網頁切版中很常遇到一個問題:當圖片大小不一致時,如何讓圖片在不變形的情況下自適應容器大小?圖片變形不僅會影響網頁的美感和視覺效果,甚至影響使用者閱讀。本篇介紹兩個方法來解決這個問題
background-image
背景圖片是很簡單支援度高的寫法,使用 background-image 取代 <img>
圖片標籤,並使用 background 相關屬性來調整圖片
|
|
使用 background-size: cover
讓圖片覆蓋整個容器,並保留圖片比例,並搭配 background-position: center
確保圖片置中,圖片呈現與裁切如下:
object-fit
某些情境我們會需要使用 <img>
圖片標籤,像是圖片需能被搜尋引擎爬蟲讀取(需要有 alt 屬性),這時就可以透過 object-fit 來達成
object-fit 選項
- fill:預設效果,元素會被拉伸填滿外層容器,長寬比會被扭曲
- contain:元素的長寬比不變,最大邊會填滿容器
- cover:元素的長寬比不變,最小邊會填滿容器,也就是元素可能會被裁切
- none:元素維持本身的大小和長寬比,不會被調整
- scale-down:元素維持本身的大小和長寬比,但如果大於容器,會被縮小適應容器
|
|
width
跟 height
用來設定圖片需要被填滿的範圍,另外也可以透過 object-position
來調整圖片的位置(預設是置中)
範例程式碼
參考文章:
https://ithelp.ithome.com.tw/articles/10250499
https://www.casper.tw/development/2020/10/11/img-cover/
評論