用戶上傳的圖片不限大小，如何在前端固定寬高的div里不變形并盡可能現(xiàn)實(shí)主要內(nèi)容

1、最簡(jiǎn)單的做法

// 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%是相對(duì)于父元素寬高而言）就能自適應(yīng)容器大小。不過(guò)該方法可能出現(xiàn)失真。

2、考慮失真的做法

img {
    max-width: 100%;
    max-height: 100%;
}

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

3、考慮留白的做法

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

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

img object-fit 示例

可以去搜索一下圖片如何自適應(yīng)寬度

里面嵌套一個(gè)img,js判斷一下圖片高度寬度,哪個(gè)大就設(shè)置成100%,另一個(gè)自適應(yīng)

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

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