小程序页面图片比例是多少

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

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
      })
  }
})

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

小程序页面图片比例是多少

最新知识库

相关标签