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

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

方案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:使用小程序自带的标签 此方案既可以使用 网络图片资源 也可以使用 本地路径图片资源 复制代码 .img { width:100%; height:100%; position:absolute; } 或者这样^_^ .img { width:100%; height:100vh; } 复制代码 ps: 根据你的情况自由选择哟
经验分享 程序员 微信小程序 职场和发展