求教，移动端，图片如何做适配不变形

Question

需求：用户可以自行上传图片，切不受限制，然后显示在手机上，手机上有好多页面，div都是不同的宽高，如果适配且不变形

Answer 1

background-size contain / cover
或者
object-fit

Answer 2

可以这么弄：

<div class="photoWrap">
        <img src="" alt="" class="photo" />
      </div>
      

.photoWrap {
    position: relative;
    width: 210px;
    height: 119px;
    margin-bottom: 6px;
    overflow: hidden;
    background-color: #f8f8f8;
    border: 1px solid #c0c0c0;
  }

  .photo {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
  }

Answer 3

一句CSS搞定~

img {
    max-width: 100%;
    height: auto !important
}