时间:2022-12-06 01:50
小程序页面图片比例是根据开发者自行定义的,没有固定的比例,图片展示的方法:
1.获取屏幕宽高。
wx.getSystemInfo({success:function(res){
//获取可使用窗口宽度
letclientHeight=res.windowHeight;
//获取可使用窗口高度
letclientWidth=res.windowWidth;
//算出比例
letratio=750/clientWidth;
//算出高度(单位rpx)
letheight=clientHeight*ratio;
//设置高度
that.setData({
height:height
});
}
});
2.图片原比例展示的代码。
<imagebindload="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;//图片的真实宽高比例
//varviewWidth=718,或者80+"%";//设置图片显示宽度,左右留有16rpx边距
//viewHeight=718/ratio;//计算的高度值
varimage=this.data.getimg;
//将图片的datadata-index作为image对象的key,然后存储图片的宽高值
image[e.target.dataset.index]={
width:$width,
height:$height
}
this.setData({
getimg:image
})
}
})