上傳頭像的時候遇到了頭像變形的問題，最后通過object-fit: cover完美解決了。這個CSS屬性可以達到最佳最完美的居中自動剪裁圖片的功能。

object-fit 理解

CSS3 background-size出現的比較早，大家應該知道其支持的一些值，除了數值之外，其還支持幾個關鍵字，例如：cover, contain等。

object-fit也是類似的，但還是有些差異，具體有5個值：

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }

每個屬性值的具體含義如下（自己理解的白話文，官方釋義見官網）：

• fill: 中文釋義“填充”。 默認值 。替換內容拉伸填滿整個 content  box, 不保證保持原有的比例。
• contain: 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器里面放得下。因此，此參數可能會在容器內留下空白。
• cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數可能會讓替換內容（如 圖片 ）部分區域不可見。
• none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
• scale-down: 中文釋義“降低”。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。
   

object-fit 屬性測試

下面我們來測試一下每一個屬性值顯示的效果每個img標簽都設置的 width:200px 和 width:200px，再加上設置的object-fit屬性的不同值，效果圖如下：

object-fit 兼容性

總結

以上所述是小編給大家介紹的css3 object-fit屬性，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！