1.object-fit
由於圖片原始大小都不一樣,強行設定大小值會導致拉伸,如果不設定大小則參差不齊。 之前我們大多數用的
大多數都是利用background-size: cover 來避免對圖片造成的壓縮或者拉伸。
fill: 默認值,和未設置一樣。使圖片拉伸填滿整個容器, 不保證保持原有的比例。
contain: 當寬/高的值達到父容器規定的最小寬/高時,則對應的另一個值會按照原始寬高比進行生成。
由於是保證整個圖片都可以出現在容器中。因此，此參數可能會在容器內留下空白
cover: “覆蓋”。保持原有尺寸比例縮放。寬度和高度至少有一個和容器一致（尺寸小的一致）。因此，此參數可能會讓圖片部分區域不可見。(圖片的高度(較小值)首先達到父容器高度后,而寬度並未達到父容器的寬度,圖片會繼續'生長', 直到寬度達到和父容器寬度一致。而等比伸縮的高度會溢出,溢出部分裁剪) none: 保持原有尺寸比例。同時保持圖片原始尺寸大小。多出的部分隱藏。 scale-down: “降低”。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個 你說圖片不是圖片，搞笑呢。。
客官，來啦來啦！！
使用的過程中用的cover比較多一些。
img {
object-fit:cover
}
當然一些背景圖也可通過 background-size:contain | cover 來避免對圖片造成的壓縮或者拉伸。
2.object-position
object-position(使用 1 到 4 個值來定義該元素在它所處的二維平面中的定位。可以使用相對或絕對偏移。) 也就是說：屬性可以控制圖片的展示位置，比如下圖有很多留白，如果我們想讓最主要的內容展示出來，就可以用這個屬性控制圖片位置；（注意：這些定位方式允許被替換元素的對象被定位到內容框外部） object-position屬性決定了它的盒子里面替換元素的對齊方式。其取值和CSS中background-position屬性取值一樣。 其默認值為“50% 50%”(center)。
3兼容
sorry ，not for IE
last but not least
掃上面圖加群嘍