微信小程序 图片宽高自适应详解
微信小程序图片宽高自适应
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%*/
}
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！