微信小程序 图片宽高自适应详解
微信小程序图片宽高自适应
1.以前将小程序图片宽度设置为屏幕宽度：
imageLoad:function(){
this.setData({
imageWidth:wx.getSystemInfoSync().windowWidth
})
}
2.现在：
.imgClass{
width:100vw;
}
解析：
CSS3引入的”vw”和”vh”基于宽度/高度相对于窗口大小
”vw”=”viewwidth”“vh”=”viewheight”
以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。
参照demo案例对照下面四个容器的css样式:
.demo{
width:100vw;
font-size:10vw;/*宽度为窗口100%，字体大小为窗口的10%*/
}
.demo1{
width:80vw;
font-size:8vw;/*宽度为窗口80%，字体大小为窗口的8%*/
}
.demo2{
width:50vw;
font-size:5vw;/*宽度为窗口50%，字体大小为窗口的5%*/
}
.demo3{
width:10vw;
height:50vh;/*宽度为窗口10%，容器高度为窗口的50%*/
}
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
热门推荐
10 儿子立冬祝福语简短独特
11 对当兵的祝福语简短
12 侄儿高考试祝福语简短
13 伴郎红包祝福语朋友简短
14 媳妇生日简短祝福语朋友
15 公司年会祝福语简短最好
16 元旦感恩祝福语简短大全
17 红包祝福语简短10字
18 周六早晨祝福语简短