用户上传的图片不限大小，如何在前端固定宽高的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把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

Answer 3

里面嵌套一个img,js判断一下图片高度宽度,哪个大就设置成100%,另一个自适应

Answer 4

div {
  position: relative;
  width:200px;
  height: 200px;
}

div img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 200px;
}

Answer 5

可以去搜索一下图片如何自适应宽度