用户上传的图片不限大小，如何在前端固定宽高的div里不变形并尽可能现实主要内容

Question

前端有一个固定大小的div，接到用户不限大小上传的图片后，怎么显示在这个div里，不失图片比例并尽可能展示主要的内容

Answer 1

object-fit: contain; 哦不对，你是要留白还是拉伸？拉伸的话用 cover

img object-fit 示例

Answer 2

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的宽高设置成100%（这里的100%是相对于父元素宽高而言）就能自适应容器大小。不过该方法可能出现失真。

2、考虑失真的做法

img {

    max-width: 100%;

    max-height: 100%;

}

max-width:100%和width:100%到底有什么区别呢？max-width是相对于img自身的尺寸而言的，也就是图片最大宽度为自身尺寸的宽。而width的100%是相对于父元素宽度的，所以max-*可以不让图片因放大而失真。不过该方法可能出现留白。

3、考虑留白的做法

假如你的img是作为background使用的就需要通过background-size: cover/contain。cover和contain到底有什么区别呢？cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。而contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。