一、先來個實戰(zhàn)

1. 測試案例

需求: 要求表情庫里所有表情包大小都固定

實際效果: 由于圖片原始大小都不一樣,強行設定大小值會導致拉伸,如果不設定大小則參差不齊。例如:

2. 解決方法

大多數(shù)都是利用background-size: cover 來避免對圖片造成的壓縮或者拉伸。

小巧而強大的object-fit

object-fit似乎是被人忽視的一個CSS3屬性。因為存在兼容性,所以沒有background-size好用,但是由于某種情況,你不得不用img標簽來引入圖片,這時候用object-fit是很好的選擇。

CSS3 background-size出現(xiàn)的比較早，大家應該知道其支持的一些值，除了數(shù)值之外，其還支持幾個關鍵字，例如：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: 中文釋義“包含”。保持原有尺寸比例。保證替換內容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能會在容器內留下空白。

cover: 中文釋義“覆蓋”。保持原有尺寸比例。保證替換內容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數(shù)可能會讓替換內容（如圖片）部分區(qū)域不可見。

none: 中文釋義“無”。保持原有尺寸比例。同時保持替換內容原始尺寸大小。

scale-down: 縮放，以適應顯示區(qū)域，當顯示區(qū)域小于圖片大小時，圖片被縮放；當顯示區(qū)域大于圖片大小時表現(xiàn)為圖片正常的大小，效果和none一致

我們給上圖所有img都統(tǒng)一加上object-fit: cover;屬性,看看效果:

完美解決！真的很方便,只需要一行css

我們具體學一下object-fit