Taro+Vue：判断图片的横竖屏转换图片适应方式（限制最大宽度和最大高度）

效果图：限制最大宽度和最大高度实现图片自适应

HTML

  <image class="img" 
         :mode="imagesMode" 
         :lazy-load="true"
         src="图片url" 
         @load="onImageLoad"/>

script 

  data() {
        return { imagesMode: 'widthFix' // 图片适应方式 }
         },


 methods: {

// 图片宽高自适应
        onImageLoad(event) {
            console.log(event);
            if (event.detail.width < event.detail.height) {
                // 如果是竖屏图则改变图片适应模式
                this.imagesMode = 'heightFix';
            }
        }
 }

 CSS

    .img {
            max-width: 240px;
            max-height: 240px;
            border-radius: 4px;
        }