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

Question

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

Answer 1

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

Answer 2

1、最简单的做法// html<div>&nbsp; &nbsp; <img src="1.png" alt=""></div>// cssdiv {&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; border: 1px solid #ddd;}img {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;}不管父容器有多高多宽，只要将img的宽高设置成100%（这里的100%是相对于父元素宽高而言）就能自适应容器大小。不过该方法可能出现失真。2、考虑失真的做法img {&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; 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把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。