背景图片自适应功能 | 小程序

1、CSS3样式属性(背景图片自适应) 
    语法 =>background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain;
    作用 => 设置背景图片尺寸
    示例 => background-size:50px,50px;(背景图片宽度为50px,高度为50px)
2、小程序设备信息API 
   语法 => wx.getSystemInfo(Object)
   作用 => 获取手机屏幕的宽度和高度,以及其他设备信息(详情请参考小程序官方开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject)
   示例 =>         
       

 var that=this;                
 //小程序设备信息API
 wx.getSystemInfo({
      success: function(res) {
           that.setData({
           //获取屏幕宽度
           windowWidth:res.windowWidth,
           //获取屏幕高度
           windowHeight:res.windowHeight
          })
      }
 })


1、定义view为背景显示标签,设置其样式属性width(标签宽度)、height(标签高度)、background/background-image(背景图片url)、background-size(背景图片尺寸)
2、数据绑定width、height、background-size
3、调用wx.getSystemInfo(Object)获取手机屏幕的宽度和高度,将屏幕宽度赋值给width和background-size的width,将屏幕高度赋值给height和background-size的height
注:
background/background-image示例=>background: url(" http://images/image.png");
若view标签的height为0px,则会出现背景图片不显示异常。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值