小程序頁面圖片比例是根據開發者自行定義的，沒有固定的比例，圖片展示的方法：
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
})
}
})
