图片动态加载在固定宽高div中，图片自适应填充，不拉伸变形

 

需求： 

1.如果高≥宽      图片不变形        图片的宽=缩略图框的宽          宽高比不变        从中心开始展示，如果高度超出显示区域，超出部分不显示 

2.如果高≤宽     图片不变形        图片的高=缩略图框的高          宽高比不变        从中心开始展示，如果宽度超出显示区域，超出部分不显示

 

 vue v-for 遍历get到的datalist  item in datalist   

.img-box flex布局 垂直局中img标签

<div class="img-box">
    <img :src="item.cover" class="imgbackground" :class="{cover: !item.iscover}" :style="{width: item.width + 'px', height: item.height + 'px'}">
</div>

.img-box { // img容器
        width: 279px;
        height: 157px;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        .imgbackground { // img标签
          width: 279px;
          height: 157px;
        }
}    

　　接口获取到的list为appList,cover字段为图片的地址 有的没有上传封面图 cover为null 所以else里把占位的封面width height默认写死

for (var i = 0; i < this.appList.length; i++) {
              var item = this.appList[i]
              // 图片传入后 拿到宽高图片地址
              let imgUrl = item.cover
              // 创建对象
              var img = new Image()
              // 改变图片的src
              img.src = imgUrl
              // 算出宽高
              if (279 / img.width > 157 / img.height) {
                item.width = 279
                item.height = 279 * img.height / img.width
              } else if (157 / img.height > 279 / img.width) {
                item.height = 157
                item.width = 157 * img.width / img.height
              } else {
                item.width = 279
                item.height = 157
              }
            }

　　

　　

来源：https://www.cnblogs.com/haizhixin/p/11344982.html