给view设置了大小，如何让他的背景图片填充满这

时间：2019-04-30 来源：小程序工厂

通过js动态设置了view的大小，然后动态设置了背景图片，如何让背景图片的自动填充满这个view，不多也不少，但是图片可能会变形。

好像是设置
background-size: 100% 100%;
但是设置了没有效果呢。
wxml中的代码：

wxss中的代码：

.styleBody {
position: fixed;
background-size: 100% 100%; /*填满整个屏幕*/
}

js中的代码：
data{
styleBody: {
frontBackground: 'rgba(255, 0, 0, 0.1)',
/*正面样式的背景*/
reverseBackground: 'rgba(255, 0, 0, 0.1)',
/*背面样式的背景*/
bottom: '',
left: '',
width: '',
height: ''
}
},
/**
* 上传图片
*/
upPicture: function() {
var that = this;
var froAndRev = this.data.frontDisplay; //判断是正面还是反面
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
if (froAndRev == "block") {
that.setData({
"styleBody.frontBackground": "url(" + tempFilePaths[0] + ")"
})
} else {
that.setData({
"styleBody.reverseBackground": "url(" + tempFilePaths[0] + ")"
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var winWidth = wx.getSystemInfoSync().windowWidth;
var winHeight = wx.getSystemInfoSync().windowHeight;
this.setData({
"bodys.width": winWidth * 0.85 + 'px',
"bodys.height": winHeight * 0.8 + 'px',
"bodys.left": winWidth * 0.075 + 'px',
"bodys.bottom": winHeight * 0.165 + 'px',

"styleBody.width": winWidth * 0.6 + 'px',
"styleBody.height": winWidth * 0.6 + 'px',
"styleBody.left": winWidth * 0.2 + 'px',
"styleBody.bottom": winWidth * 0.4 + 'px',

"upPictureBtn.width": winWidth * 0.4 + 'px',
"upPictureBtn.left": winWidth * 0.075 + 'px',
"upPictureBtn.bottom": winHeight * 0.05 + 'px',

"sumbitBtn.width": winWidth * 0.4 + 'px',
"sumbitBtn.right": winWidth * 0.075 + 'px',
"sumbitBtn.bottom": winHeight * 0.05 + 'px',

"icon.fontSize": winWidth * 0.1 + 'px',
"icon.top": winWidth * 0.1 + 'px',
"icon.right": winWidth * 0.15 + 'px'
})
},

感谢大佬们对小白的支持。

上一篇：SDK版本升级问题

下一篇：自定义头部开发版和线上版显示效果不一致

微信小程序开发

给view设置了大小，如何让他的背景图片填充满这