记一次img标签图片不拉伸处理办法

当前需求是：

UI 画的盒子，固定宽高 242 * 162，里边有一张图片，图片宽高不固定，但是图片不能拉伸，怎么展示没说

1. 图片全部展示，不填充满，但是图片不能拉伸(最长边展示出来)
2. 图片展示一部分，图片不能拉伸(最短边展示出来)
3. 其他火星需求：宽高固定，动态图片宽高不固定，全部填充满，不裁剪，不拉伸，好无理的需求呐，不干，直接怼回去就行

这个就简单了，微信小程序的 image 标签有一个 mode 属性，但是原生 html 的 img 标签没有啊

但是原生的 html 标签有 background-image 有 background-repeat 有 background-position 有 background-size

<!-- vue 项目 原生 html 一样，只是用 js 做一个动态的图片绑定就行了 -->
<div class="goods-item-pic" :style="'background-image:url('+goods.pic+')'"></div>
<style>
.goods-item-pic{
  width:242px;
  height:162px;
  background-size:cover; /* 看情况，有 cover 和 contain 模拟小程序里边的 image 的 mode 属性 */
  background-repeat: no-repeat; /* 不让重复 */
  background-position: top center ; /* 固定展示的位置 */
}
</style>