object-fit: contain; 哦不對，你是要留白還是拉伸？拉伸的話用 cover

img object-fit 示例

1、最簡單的做法

// html

<div>

    <img src="1.png" alt="">

</div>

// css

div {

    width: 200px;

    height: 200px;

    border: 1px solid #ddd;

}

img {

    width: 100%;

    height: 100%;

}

不管父容器有多高多寬，只要將img的寬高設(shè)置成100%（這里的100%是相對于父元素寬高而言）就能自適應(yīng)容器大小。不過該方法可能出現(xiàn)失真。

2、考慮失真的做法

img {

    max-width: 100%;

    max-height: 100%;

}

max-width:100%和width:100%到底有什么區(qū)別呢？max-width是相對于img自身的尺寸而言的，也就是圖片最大寬度為自身尺寸的寬。而width的100%是相對于父元素寬度的，所以max-*可以不讓圖片因放大而失真。不過該方法可能出現(xiàn)留白。

3、考慮留白的做法

假如你的img是作為background使用的就需要通過background-size: cover/contain。cover和contain到底有什么區(qū)別呢？cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。而contain把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。