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

方案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 src="/images/picture.jpg" class="img">image>
复制代码
.img {
    width:100%;
    height:100%;
    position:absolute;
}
或者这样^_^
.img {
    width:100%;
    height:100vh;
}
复制代码

ps: 根据你的情况自由选择哟

你可能感兴趣的:(微信小程序中图片占满整个屏幕)