小程序相关（三）

  • 1、image：解释：图片，支持 JPG、PNG、GIF、BMP、WEBP 等格式。image 组件默认宽度 300px 、高度 225px 。

    • src：图片资源地址
    • mode：默认scaleToFill， 图片裁剪、缩放的模式
    • lazy-load：图片懒加载，在图片即将进入一定范围（距离当前屏 50px）时才开始进行加载，默认false
    • image-menu-prevent：阻止长按图片时弹起默认菜单（即将该属性设置为image-menu-prevent="true"或image-menu-prevent），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性。注：长按菜单后的操作暂不支持 svg 格式
    • preview：点击后是否预览图片。在不设置的情况下，若 image 未监听点击事件且宽度大于 1/4 屏宽，则默认开启
    • original-src：预览时显示的图片地址

  • mode 有效值

    • 缩放
      • scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
      • aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
      • aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
      • widthFix：宽度不变，高度自动变化，保持原图宽高比不变
    • 裁剪
      • top不缩放图片，只显示图片的顶部区域
      • bottom：不缩放图片，只显示图片的底部区域
      • center：不缩放图片，只显示图片的中间区域
        。。。。

image css 样式需要设置宽高

posted @ 2021-03-24 13:25  Running00  阅读(35)  评论(0)  编辑  收藏  举报