本文目錄
做項目經常會遇到圖片列表展示，圖片一般是用戶從後臺上傳的，當然也有靜態資源圖片的，上傳的圖片尺寸千差萬別。如果前端不控制圖片大小，整個排版就會很亂，如果給定長寬，圖片又會變形，用背景圖片來處理又特別麻煩。這個問題一直苦惱了我好久，最近在前端工程師的幫助下，終於找到解決辦法了。
一、object-fit介紹
object-fit CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。
您可以通過使用 object-position 屬性來切換被替換元素的內容對象在元素框內的對齊方式。
二、object-fit語法
2.1 語法
object-fit 屬性由下列的值中的單獨一個關鍵字來指定。
2.2 取值
contain被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
cover被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。
fill被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那麼該對象將被拉伸以適應內容框。
none被替換的內容將保持其原有的尺寸。
scale-down內容的尺寸與
none或contain中的一個相同，取決於它們兩個之間誰得到的對象尺寸會更小一些。
2.3 正式語法
fill | contain | cover | none | scale-down
三、object-fit示例
請參照這個頁面：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
四、object-fit瀏覽器兼容性
請參考下圖：
