mode="aspectFill"

mode 有效值:

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

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

微信小程序 mode 的几种模式的更多相关文章

  1. 微信小程序animation动画2种方法

    这里介绍 2 种方法一种是常规的小程序方法操作,另一种是引入动画库 1. 常规动画操作设置 wxml: <view> <view bindtap="clickMe" ...

  2. 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法

    异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...

  3. 微信小程序 - 开发工具之编译模式

    在开发中,遇到一个层级较深的页面,每次都要点击好多步才能调试,也比较闹心,有了自定义编译模式,就方便很多了 点击红圈处, 选择 "+添加编译模式" , 默认的, 启动页面会填入当前 ...

  4. 微信小程序常用的3种弹窗

    1. 表示操作成功,文字上方会显示一个表示操作成功的图标. wx.showToast({ title: '操作成功!', icon: 'success', duration: 1500 // 提示窗停 ...

  5. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  6. 微信小程序开发框架技术选型

    目前微信小程序开发有三种方式,原生微信小程序,使用mpVue或wepy微信小程序开发框架. 三种开发方式横向对比资料如下:  

  7. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  8. 微信小程序入门篇

    微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教 ...

  9. 微信小程序—setTimeOut定时器的坑

    原文地址: http://fanjiajia.cn/2018/06/27/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E2%80%94setTimeOu ...

随机推荐

  1. jnhs[未解决]无法使用选定的hibernate配置文件建立数据库连接.请验证hibernate.cfg.xml中的数据库连接详情信息

    工程可以正常的使用读写数据库,当然model和model.hbm.xml文件是自己写的. 解决中

  2. php中 重载的方法

    php中 重载(一)这个文章,谢谢.作为初学者,大牛勿喷: 基本是两个方法 __call,当调用对一个不可访问的对象方法时,会自动执行该魔术方法!(对象调用) 典型的两种处理方式: 1,给出友好的提示 ...

  3. Django学习之路由分发和反向解析

    原 Django学习之路由分发和反向解析 2018年07月12日 14:04:55 huangql517 阅读数 519 1>路由分发 我们之前学习的路由配置都是在项目的全局控制文件(项目名称目 ...

  4. ajax成功请求到后台,但是前端报404错误

    记录下今天遇见的一个问题,一个删除的ajax请求,传递一个主键到后台,后台成功接受并执行删除,但是前端报POST404错误. 查找原因是由于Controller忘记写返回状态码 @Responsebo ...

  5. Linux常用命令5 用户管理命令

    1.用户管理命令:useradd 所在路径:/usr/bin/useradd      执行权限:root 语法:useradd 用户名 功能描述:添加新用户 例如:useradd hzw userd ...

  6. This Product is covered by one or more of the folloWing patents

    借用一下网络图片,作为描述: 原因: 启动方式使用了网络启动, 解决方案: 进入bios,修改启动方式,禁用网卡驱动,使用从硬盘启动或者从U盘启动即可.

  7. 【JZOJ4804】【NOIP2016提高A组模拟9.28】成绩调研

    题目描述 输入 输出 样例输入 5 3 1 2 3 1 2 1 2 1 1 1 1 样例输出 4 数据范围 解法 考虑设置左指针l和右指针r: 维护[l,r]的关于等第的桶. 初始l=r=0: 每次右 ...

  8. 基于jQuery的自定义滚动条

    在线演示 本地下载

  9. cmakelists.txt中配置openg环境出现: undefined reference to symbol 'glLightfv'

    cmakelists.txt中配置openg环境出现: undefined reference to symbol 'glLightfv' 解决方法: 在cmakelists.txt添加 find_p ...

  10. 阿里云发布Apsara SA系列混合云存储阵列

    3月21日,2019北京阿里云峰会上,阿里云正式发布Apsara SA系列混合云存储阵列,融合IP SAN,FC SAN,NAS和OSS对象存储协议于一体,同时实现了本地数据中心架构和公共云存储的无缝 ...