设置了一张背景图片，总是不能与设备同宽，请问该如何设置。

 //对应  wxml  代码段
 <view
  class="body-background"
  style="background: url({{profile.profileUrl}}) no-repeat;"
  ></view>
//  对应  js
  data: {
    profile : {
      profileUrl: "",
      profileWidth:"",
      profileHeight:"",
    }
  }
//对应  wcss  代码段
.body-background{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 780rpx;
  background-size: contain;
  box-sizing: border-box;
  line-height: 780rpx;
  text-align: center;
}

显示结果如下：

另一方面：

   //尝试通过获取移动设备参数适配
 wx.getSystemInfo({
      success: (res) => {
        that.globalData.windowWidth=res.windowWidth
        that.globalData.windowHeight=res.windowHeight
        console.log(res.screenWidth,res.screenHeight,res.pixelRatio)
      },
    })//设置在  app.js  中，通过全局变量传递至页面参数

style="background: url({{profile.profileUrl}}) no-repeat;
width:{{profile.profileWidth}}rpx;    height:{{profile.profileHeight}}rpx"