微信小程序图片布满整个窗口
发表时间:2020-10-19
发布人:葵宇科技
浏览次数:73
微信小程序图片布满整个窗口
在做微信小程序或者微信公众号前端时候,经常遇到一张图片当做背景,布局整个窗口,有时图片不能占满窗口
<view class="imagediv">
<image src="/static/image/start.png" mode="widthFix" class="imagetp"/>
</view>
设置样式
.imagediv{
position: absolute;
width: 100%;
height: 100%;
}
.imagetp{
width: 100%;
height: 100%;
}
以上代码,不能有效让图片占满窗口,因为image标签会默认设置
display:inline-block;,对应的图片高度会有一个值height:66rpx;
此时,需要在本页面中图片样式中新增display:initial;
.imagetp{
width: 100%;
height: 100%;
display: initial;
}