• 技术文章 >微信小程序 >小程序开发

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

    烟雨青岚烟雨青岚2020-06-16 14:48:09原创1401

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

    铺满屏幕,主要用到<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;
    }

    演示:

    0ef17b84915f1c1f44f579fecd61e3e.png

    看看不加widthFix的效果图:

    01550f43890aafd9b1a65e8ec3b37a7.png

    所以还是很有用的。

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

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

    推荐教程:《微信小程序

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:小程序
    上一篇:小程序入门就看这篇 下一篇:微信小程序跳一跳在哪里找?
    大前端线上培训班

    相关文章推荐

    • 一款小而美小程序脚手架,让你更流畅快速的开发小程序• 小程序之picker 数据是 Object Array• 小程序入门就看这篇• 教你用PHP实现微信小程序人脸识别刷脸登录功能

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网