css圖片自適應object-fit

當圖片比例不固定時，想要讓圖片自適應，一般都會用background-size:cover/contain，但是這個只適用於背景圖。

img有個屬性object-fit

屬性值：object-fit: fill / contain / cover / none / scale-down;

fill: 默認值。內容拉伸填滿整個content box, 不保證保持原有的比例。

contain: 保持原有尺寸比例。長度和高度中長的那條邊跟容器大小一致，短的那條等比縮放，可能會有留白。

cover: 保持原有尺寸比例。寬度和高度中短的那條邊跟容器大小一致，長的那條等比縮放。可能會有部分區域不可見。

none: 保持原有尺寸比例。同時保持替換內容原始尺寸大小。

scale-down:保持原有尺寸比例,如果容器尺寸大於圖片內容尺寸，保持圖片的原有尺寸，不會放大失真；容器尺寸小於圖片內容尺寸，用法跟contain一樣。

具體如下圖所示：

用法

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

這個屬性看起來很好用，但是！但是！IE並不支持