小程序页面图片比例是多少 小程序界面图片的设计比例有

文章摘要：小程序页面图片比例是多少 小程序界面图片的设计比例有

小程序页面图片比例是根据开发者自行定义的，没有固定的比例，图片展示的方法： 1.获取屏幕宽高。 wx.getS […]

小程序页面图片比例是根据开发者自行定义的，没有固定的比例，图片展示的方法：

1.获取屏幕宽高。

wx.getSystemInfo({

  success: function (res) {

    // 获取可使用窗口宽度

    let clientHeight = res.windowHeight;

    // 获取可使用窗口高度

    let clientWidth = res.windowWidth;

    // 算出比例

    let ratio = 750 / clientWidth;

    // 算出高度(单位rpx)

    let height = clientHeight * ratio;

    // 设置高度

    that.setData({

      height: height

    });

  }

});

2.图片原比例展示的代码。

<image bindload="imageLoad" src="{{act_rule}}" style="width:{{getimg.width}}rpx; height:{{ getimg.height}}rpx;"/>

 imageLoad: function(e) {

     var $width=e.detail.width,    //获取图片真实宽度

         $height=e.detail.height,

         ratio=$width/$height;    //图片的真实宽高比例

     //var viewWidth=718,或者80+"%";           //设置图片显示宽度，左右留有16rpx边距

       //  viewHeight=718/ratio;    //计算的高度值

      var image=this.data.getimg; 

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

      image[e.target.dataset.index]={

         width: $width,

         height:$height

      }

      this.setData({

           getimg:image

      })

  }

})