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, 最終呈現的是尺寸比較小的那個。
假設我們使用的原始圖片是：
容器的尺寸是160*160, 背景色是灰藍色，同時，測試的圖片高寬設置為100%, 如下CSS代碼：
.box { width: 160px; height: 160px; background-color: #beceeb; } .box > img { width: 100%; height: 100%; }
結果，各個屬性值的表現如下截圖：
大家可以對照示意感受下，什么是內容拉伸(fill)，什么是內容全部都顯示(contain)，什么是容器沒有留白(cover)，什么是該多大就多大(none)。
比如圖片設置全部可以為：
.post .list-img{ width: 30%; max-height: 80px; max-width: 80px; padding-right: 5px; float: left; padding: 10px 5px 0 0; display: block;object-fit: cover;}
原文來自：http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/comment-page-1/
文章：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503031456.html