通过js动态设置了view的大小，然后动态设置了背景图片，如何让背景图片的自动填充满这个view，不多也不少，但是图片可能会变形。
好像是设置
background-size: 100% 100%;
但是设置了没有效果呢。
wxml中的代码：
<view class='styleBody' style='bottom:{{styleBody.bottom}};left:{{styleBody.left}};width:{{styleBody.width}};height:{{styleBody.height}};background:{{styleBody.frontBackground}}'> |
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' }) }, |
感谢大佬们对小白的支持。
