微信小程序中图片占满整个屏幕

2,063 阅读1分钟

方案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: 根据你的情况自由选择哟