收藏
回答

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

通过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'
    })
  },

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

最后一次编辑于  01-16  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏