當(dāng)圖片比例不固定時(shí)，想要讓圖片自適應(yīng)，一般都會(huì)用background-size:cover/contain，但是這個(gè)只適用于背景圖。
img有個(gè)屬性object-fit
屬性值：object-fit: fill / contain / cover / none / scale-down;
fill: 默認(rèn)值。內(nèi)容拉伸填滿整個(gè)content box, 不保證保持原有的比例。
contain: 保持原有尺寸比例。長度和高度中長的那條邊跟容器大小一致，短的那條等比縮放，可能會(huì)有留白。
cover: 保持原有尺寸比例。寬度和高度中短的那條邊跟容器大小一致，長的那條等比縮放。可能會(huì)有部分區(qū)域不可見。
none: 保持原有尺寸比例。同時(shí)保持替換內(nèi)容原始尺寸大小。
scale-down:保持原有尺寸比例,如果容器尺寸大于圖片內(nèi)容尺寸，保持圖片的原有尺寸，不會(huì)放大失真；容器尺寸小于圖片內(nèi)容尺寸，用法跟contain一樣。
具體如下圖所示：
CSS Demo
用法：
img{
width: 100%;
height: 100%;
object-fit: contain;
}
這個(gè)屬性看起來很好用，但是！但是！IE并不支持
瀏覽器的兼容情況
又但是，你可以去GutHub看看...
img有了object-fit，還得有個(gè)位置屬性object-position，用法跟background-position一樣。
還有一個(gè)問題，就是上圖CSS Demo，我給了容器一個(gè)紅色的背景色，因?yàn)閕mg寬高都設(shè)置了百分百，我想看看img最終的大小是多少，然后我就給了img一個(gè)黑色的背景色。結(jié)果，如圖所示，圖片大小果然是百分百。
