微信小程序 mode 的几种模式
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
裁剪 top 不缩放图片,只显示图片的顶部区域
裁剪 bottom 不缩放图片,只显示图片的底部区域
裁剪 center 不缩放图片,只显示图片的中间区域
裁剪 left 不缩放图片,只显示图片的左边区域
裁剪 right 不缩放图片,只显示图片的右边区域
裁剪 top left 不缩放图片,只显示图片的左上边区域
裁剪 top right 不缩放图片,只显示图片的右上边区域
裁剪 bottom left 不缩放图片,只显示图片的左下边区域
裁剪 bottom right 不缩放图片,只显示图片的右下边区域
微信小程序 mode 的几种模式的更多相关文章
- 微信小程序animation动画2种方法
这里介绍 2 种方法一种是常规的小程序方法操作,另一种是引入动画库 1. 常规动画操作设置 wxml: <view> <view bindtap="clickMe" ...
- 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法
异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...
- 微信小程序 - 开发工具之编译模式
在开发中,遇到一个层级较深的页面,每次都要点击好多步才能调试,也比较闹心,有了自定义编译模式,就方便很多了 点击红圈处, 选择 "+添加编译模式" , 默认的, 启动页面会填入当前 ...
- 微信小程序常用的3种弹窗
1. 表示操作成功,文字上方会显示一个表示操作成功的图标. wx.showToast({ title: '操作成功!', icon: 'success', duration: 1500 // 提示窗停 ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序开发框架技术选型
目前微信小程序开发有三种方式,原生微信小程序,使用mpVue或wepy微信小程序开发框架. 三种开发方式横向对比资料如下:
- 微信小程序 View:flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
- 微信小程序入门篇
微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教 ...
- 微信小程序—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 ...
随机推荐
- 各NoSQL数据库管理系统与模型比较
提供:ZStack云计算 内容简介 NoSQL数据库的存在意义在于提供传统关系数据库管理系统所不具备的特定功能.无论是负责承载简单的键-值对存储以实现短期缓存,抑或是处理传统数据库及结构化查询语言(简 ...
- CentOS 7 yum 安装与配置MySQL5.7
1.下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 2.安装mysql源 yu ...
- ubuntu16.04上在使用搜狗输入法时,按shift不能正常切换中英文
问题描述: ubuntu16.04上在使用搜狗输入法时,不知道把什么组合键给错按了,导致了按shift不能正常切换中英文,这是一件很烦恼的事儿! 解决步骤: 1,终端输入打开: fcitx-confi ...
- JetBrains PyCharm 2017.2 字体放大缩小 功能
- web前端学习(二)html学习笔记部分(5)--拖放元素、canvas画布使用
1.2.11 拖放 1.2.11.1 html拖放 1.2.11.2 html拖放本次资源 showOjb(一个对象)展示一下一个对象的信息. 1.2.12 html画布(canvas) 标 ...
- 对List<Map<String, Object>>集合排序
private void mySort(List<Map<String, Object>> list) { //list为待排序的集合,按SEQ字段排序 Comparator& ...
- 技巧专题3(cdq分治、整体二分等)
cdq分治与整体二分 cdq来源于2008年国家集训队作业陈丹琦(雅礼巨佬),用一个log的代价完成从静态到动态(很多时候是减少时间那一维的). 对于一个时间段[L, R],我们取mid = (L + ...
- 廖雪峰Python总结3
1.模块简介 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件中,这样每个文件包含的代码相对来说就比较少.一个.py文件就称之为一个模块(Module). 使用模块的好处: 提高了代码的可 ...
- Spring_Bean的作用域---和使用外部属性文件
<!-- 使用 bean的scope属性来配置bean的作用域 singleton:默认值.容器初始时创建bean实例,在整个容器的生命周期内只创建这一个bean单例 prototype:原型的 ...
- CSS权值比较(读书笔记)
1.继承0.1 标签1 类选择符10 ID选择符100 2.层叠:后面的样式会覆盖前面的样式. 3.内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式(外 ...