微信小程序 圖片寬高自適應
堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業 ”的價值觀,專業網站建設服務10余年為成都成都白烏魚小微創業公司專業提供成都定制網頁設計營銷網站建設商城網站建設手機網站建設小程序網站建設網站改版,從內容策劃、視覺設計、底層架構、網頁布局、功能開發迭代于一體的高端網站建設服務。
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% */ }
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
本文名稱:微信小程序圖片寬高自適應詳解
路徑分享:http://m.newbst.com/article0/joccoo.html
成都網站建設公司_創新互聯,為您提供外貿建站、品牌網站設計、商城網站、用戶體驗、品牌網站建設、網站內鏈
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯