图片拉伸和保持长宽比的问题

在项目中有一个图片上传控件，上传后提供预览功能，是200px*120px大小。

最初的代码是这样的，在img标签外套一个div，然后给这个div指定宽度和高度，让img标签的宽度和高度都为100%。这样的话图片就可以充满整个div了。

.img-preview {
  width: 200px;
  height: 120px;
  position: relative;
  text-align: center;
  .img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}

结果某天交互找到我，说他传了一张方的图片被拉伸了。我们一起来看下，这张图片原本长这样：

然后上传之后就变成这样：

然后他希望上传的图片能够保持长宽比。这还不简单，只要不把宽度定死不就行了嘛。于是我加了max-width: 100%，也就是高度始终为最大高度120px，宽度在不大于200px的情况下根据图片比例自适应，大于200px那就始终为最大宽度200px。

.img-preview {
  width: 200px;
  height: 120px;
  position: relative;
  text-align: center;
  .img {
    max-width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}

效果如下：

结果没过多久他又来给我提缺陷，说他传了一张很长的图，然后还是变形了。

然后我又给加了max-height: 100%，让高度也自适应。

.img-preview {
  width: 200px;
  height: 120px;
  position: relative;
  text-align: center;
  .img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 2px;
  }
}

效果如下（没做垂直居中）：

这样做的话就是看图片宽和高哪个长，然后让长的边适应容器宽度，短的边根据图片比例自适应。

但是这样也有缺点，如果有个图片宽度和高度都小于父容器定义的宽高，那么这个图片就会保持原有的分辨率，不会适应父容器。