CSS3 object-position/object-fit屬性
CSS3background-size出現(xiàn)的比較早欢搜，大家應(yīng)該知道其支持的一些值吹埠，除了數(shù)值之外缘琅，其還支持幾個關(guān)鍵字，例如：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; }
每個屬性值的具體含義如下（自己理解的白話文最住，官方釋義見官網(wǎng)）：
fill: 中文釋義“填充”涨缚。默認值兰吟。替換內(nèi)容拉伸填滿整個content box, 不保證保持原有的比例混蔼。
contain: 中文釋義“包含”。保持原有尺寸比例晚吞。保證替換內(nèi)容尺寸一定可以在容器里面放得下槽地。因此，此參數(shù)可能會在容器內(nèi)留下空白逢勾。
cover: 中文釋義“覆蓋”。保持原有尺寸比例迫摔。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致躯嫉。因此擂啥，此參數(shù)可能會讓替換內(nèi)容（如圖片）部分區(qū)域不可見哺壶。
none: 中文釋義“無”至扰。保持原有尺寸比例。同時保持替換內(nèi)容原始尺寸大小翎猛。
scale-down: 中文釋義“降低”。就好像依次設(shè)置了none或contain, 最終呈現(xiàn)的是尺寸比較小的那個疫稿。
假設(shè)我們使用的原始圖片是：
容器的尺寸是160*160, 背景色是灰藍色俊扳，同時号坡，測試的圖片高寬設(shè)置為100%, 如下CSS代碼：
.box { width: 160px; height: 160px; background-color: #beceeb; }.box > img { width: 100%; height: 100%; }
結(jié)果，各個屬性值的表現(xiàn)如下截圖：
大家可以對照示意感受下，什么是內(nèi)容拉伸(fill)代箭，什么是內(nèi)容全部都顯示(contain)乙帮，什么是容器沒有留白(cover)盼樟，什么是該多大就多大(none)晨缴。
比如圖片設(shè)置全部可以為：
.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;}
