小程序页面图片比例是根据开发者自行定义的，没有固定的比例，图片展示的方法：
获取屏幕宽高。
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
});
}
});
图片原比例展示的代码。
<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
})
}
})
