微信小程式中圖片佔滿整個螢幕

走啊丶去拯救世界發表於2018-12-04
微信小程式

方案1：使用背景圖 (background-image)

此方案適用於 網路圖片資源，因為 background-image 不允許使用 本地路徑圖片資源

page {
    overflow:hidden; 
    position:fixed; 
    background-image:url('https://bing.ioliu.cn/v1/rand'); 
    margin: 0px; 
    /*下面的是關鍵的設定100%顯示*/ 
    background-size: 100% 100%; 
}
複製程式碼

方案2：使用小程式自帶的</image>標籤

此方案既可以使用 網路圖片資源 也可以使用 本地路徑圖片資源

<image src="/images/picture.jpg" class="img"></image>
複製程式碼
.img {
    width:100%;
    height:100%;
    position:absolute;
}
或者這樣^_^
.img {
    width:100%;
    height:100vh;
}
複製程式碼

ps: 根據你的情況自由選擇喲

相關文章