當(dāng)圖片比例不固定時，想要讓圖片自適應(yīng)鹦筹，一般都會用background-size:cover/contain秋秤，但是這個只適用于背景圖。
img有個屬性object-fit
屬性值：object-fit: fill / contain / cover / none / scale-down;
fill: 默認(rèn)值恨胚。內(nèi)容拉伸填滿整個content box, 不保證保持原有的比例骂因。
contain: 保持原有尺寸比例。長度和高度中長的那條邊跟容器大小一致赃泡，短的那條等比縮放寒波，可能會有留白。
cover: 保持原有尺寸比例升熊。寬度和高度中短的那條邊跟容器大小一致俄烁，長的那條等比縮放〖兑埃可能會有部分區(qū)域不可見页屠。
none: 保持原有尺寸比例。同時保持替換內(nèi)容原始尺寸大小。
scale-down:保持原有尺寸比例,如果容器尺寸大于圖片內(nèi)容尺寸辰企，保持圖片的原有尺寸风纠，不會放大失真；容器尺寸小于圖片內(nèi)容尺寸牢贸，用法跟contain一樣竹观。
具體如下圖所示：
CSS Demo
用法：
img{
width: 100%;
height: 100%;
object-fit: contain;
}
這個屬性看起來很好用，但是潜索！但是臭增！IE并不支持
瀏覽器的兼容情況
又但是，你可以去GutHub看看...
img有了object-fit帮辟，還得有個位置屬性object-position速址，用法跟background-position一樣。
還有一個問題由驹，就是上圖CSS Demo芍锚，我給了容器一個紅色的背景色，因為img寬高都設(shè)置了百分百蔓榄，我想看看img最終的大小是多少并炮，然后我就給了img一個黑色的背景色。結(jié)果甥郑，如圖所示逃魄，圖片大小果然是百分百。
