微信小程序中图片占满整个屏幕
方案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: 根据你的情况自由选择哟
