欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  微信小程序

小程序图片如何铺满整个屏幕?

程序员文章站 2022-03-23 08:39:31
...
小程序图片如何铺满整个屏幕?

小程序图片如何铺满整个屏幕?

铺满屏幕,主要用到<image>标签里面的mode='widthFix'属性

具体加在的程序段是.wxml:

<image src="/images/1.jpg" class='in-image' mode='widthFix'> </image>

以及.wxss的改变:

page{
   height:100%
}
.imagesize{
 display:flex;
 height: 100%;
 justify-content: center;
 align-items:center;
}

演示:

小程序图片如何铺满整个屏幕?

看看不加widthFix的效果图:

小程序图片如何铺满整个屏幕?

所以还是很有用的。

这里由于是底部tab窗口,所以没有显示完整屏幕覆盖的图。

可以设计启动画面,当然截取合适比例的图会影响实际显示效果,还有就是背景颜色与图片颜色的不同需要你调试时候注意一下。

推荐教程:《微信小程序

以上就是小程序图片如何铺满整个屏幕?的详细内容,更多请关注其它相关文章!

相关标签: 小程序