微信小程序 圖片寬高自適應
1.以前將小程序圖片寬度設置為屏幕寬度：
imageLoad: function () {
this.setData({
imageWidth: wx.getSystemInfoSync().windowWidth
})
}
2.現在：
.imgClass{
width: 100vw;
}
解析：
CSS3引入的”vw”和”vh”基于寬度/高度相對于窗口大小
”vw”=”view width”“vh”=”view height”
以上我們稱為視窗單位允許我們更接近瀏覽器窗口來定義大小。
參照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% */
}
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
