根据图片的宽高比例来控制图片的显示效果

问题：

遇到问题：后台获取的图片宽高不定，有可能宽大于高，也有可以高大于宽，这时候设置objec-fit时就会不稳定，控制一方显示了，另一方的图片就可能显示的效果不是我们想要的，特别是人物的时候，比如我有一个宽大于高的div盒子，需要在盒子内显示后台传入的人物图片（图片是后台获取的），当后台传入和我一样宽大于高的盒子时，我设置objec-fit:cover;可以正常控制宽高比，也可以达到想要的人物显示效果，但当后台传入宽小于高的盒子时（人物在正中间篇上一点的位置），此时在这个盒子内，图片显示就会切掉头，效果不理想，这时就需要判断图片的宽高比了。

解决思路：

获取图片的宽高，对比大小，另设样式，代码如下：

设置@load方法

<van-swipe :autoplay="3000" style="height: 30vh;">
        <van-swipe-item v-for="(item,index) in activityImgList " :key="index">
          <img class="activity-preview-img"
               :src="item"
               @load="handleImageLoad"
          />
        </van-swipe-item>
      </van-swipe>

 js处理

 根据宽高对比添加naturalWidth类样式

handleImageLoad(event){
      console.log(event)
      const img = event.target
      console.log(img.naturalWidth, img.naturalHeight)
      if (img.naturalWidth && img.naturalHeight) {
        if (img.naturalWidth < img.naturalHeight) {
          console.log('123')
          img.classList.add('naturalWidth')
        }else{

        }
      }
    }

新增的css类样式

注意：这个样式只能控制图片靠顶显示，可以暂时调整效果，但仍不太理想；它也可以调整移动距离，但我的需要控制在盒子内显示，它移动的是裁剪后的图片，如果设置margin或则tranform的话，图片会整体移动，需要谨慎选择，不是最优方案。

.naturalWidth{
  object-position: top;
}

对比效果图：

此为设置前的效果图

添加设置后：

总结：保持宽高比例不失调的情况下可以把人物脑袋显示出来，会比上面效果好一些，但仍不是最优方案，主体有点太靠顶显示，