小程序 image组件，高度自适应

期望的效果是，image的高度height是自动的。

网上好多说把image的mode设置为widthFit。这种方法还是需要给image设置宽度高度。并不是height自动，而是height固定，在显示的时候，显示的区域在高度上是自适应的

所以还是需要用js计算

imageLoad: function(e) {

    var $width=edetailwidth,//获取真实宽度

        $height=edetailheight,

        ratio=$width/$height;    //的真实宽高比例varviewWidth=718,//设置显示宽度，左右留有16rpx边距viewHeight=718/ratio;    //计算的高度值varimage=thisdataimages;

      //将的datadata-index作为image对象的key,然后存储的宽高值

image[etargetdatasetindex]={

        width:viewWidth,

        height:viewHeight

      }

      thissetData({

          images:image

      })

  }

>

<image src="{{images}}" bindload="imgLoadFunc"></image>

imgLoadFunc(e){

    thissetData({

      ImgWidth: edetailwidth,

      ImgHeight: edetailheight

    })

  },

以上就是关于小程序 image组件，高度自适应全部的内容，包括:小程序 image组件，高度自适应、微信小程序富文本编辑的图片超出、微信小程序 获取照片宽高等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！