小程序自适应背景图,不同屏幕比例 如何做到不变形、不留空白

1、fixed定位一个 image标签，width: 100vwheight: 100vhmode选择aspectFill

2、background-size: cover

     1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。

      2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。

1. image组件默认宽度300px、高度225px  ；

2.css设置宽高（尺寸最好为rpx，更适应屏幕）

3.mode 设置缩放模式（13种）

样式设置宽度100%   添加属性 mode="widthFix"

4.套在div种，设置div宽高，

设计将背景切成了三段，左边、中间、右边

重新设置width解决问题

const query = wx.createSelectorQuery().in(that)

query.select('.nick-center-content').boundingClientRect(function (res) {

console.log(res)

that.setData({

nickWidth: parseInt(res.width)

})

// res.width

}).exec()

欢迎体验作者开发的小程序

---