原文:微信小程序把玩(二十八)image组件

image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定。

重点属性:

三种缩放模式

九种剪切方式

wxml


<!--3中是缩放模式
scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来 -->
<view>aspectFit 保持纵横比缩放图片,只保证图片的短边能完全显示出来</view>
<image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/> <!--9种是裁剪模式
top 不缩放图片,只显示图片的顶部区域
bottom,同上
left
right
top right
top left
bottom right
bottom left
-->
<view>bottom 不缩放图片,只显示图片的底部区域</view>
<image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/> <view>left 不缩放图片,只显示图片的左边区域</view>
<image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/> <view>top right 不缩放图片,只显示图片的右上边区域</view>
<image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>

微信小程序把玩(二十八)image组件的更多相关文章

  1. 微信小程序把玩(十八)picker组件

    原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...

  2. 微信小程序把玩(十)swiper组件

    原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...

  3. 微信小程序把玩(十二)text组件

    原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...

  4. 微信小程序把玩(十九)radio组件

    原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...

  5. 微信小程序把玩(十五)checkbox组件

    原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...

  6. 微信小程序把玩(十六)form组件

    原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...

  7. 微信小程序把玩(十四)button组件

    原文:微信小程序把玩(十四)button组件 button按钮用的算是最普遍的组件之一. 主要属性: wxml <!--按钮默认样式,点击事件--> <button type=&qu ...

  8. 微信小程序把玩(十七)input组件

    原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...

  9. 微信小程序把玩(十一)icon组件

    原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon t ...

  10. 微信小程序把玩(十三)progress组件

    原文:微信小程序把玩(十三)progress组件 进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度- 主要属性: wxml <progress percent=" ...

随机推荐

  1. JS null问题

    在学习getElementById()方法的过程中出现了这样一个问题,便想记录下来. 分析问题之前,我们最好还是先来认识一下getElementById()方法.getElementById()方法, ...

  2. android应用开发 button显示两行文本

    自己写了个电话拨号器的程序给男朋友玩,用来专门打我的手机号,为了把界面做的好看一点,须要用到显示两行文本的button.在网上搜罗了两种方法,记录在以下.跟大家一起分享一下,希望能帮到须要的人. 方法 ...

  3. Thermal zone monitoring in an electronic device

    FIELD One embodiment of the invention relates to a closed loop thermal control process in a portable ...

  4. Centos Apache和tomcat集成配置,同一时候支持PHP和JAVA执行

    近期因为项目的须要,须要再原来执行Tomcatserver上支持PHP执行.非常显然,PHP执行使用的是Apacheserver.尽管Tomcat也属于Apache,可是并没有现有的环境,须要我们自己 ...

  5. springboot启动tomcat报错java.lang.NoClassDefFoundError: javax/el/ELManager仅记录

    Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'o ...

  6. 用Github账号领Ripple币

    最近随着比特币在互联网上的流行,其他各种电子货币也都增加了曝光率. 昨晚在 v2ex 上看到有人发帖,用 20RMB 换取 2013 年 5 月 1 日前使用过的 github 账号得到的一个验证码. ...

  7. wpf设置设计时的ViewModel

    原文:wpf设置设计时的ViewModel wpf mvvm开发中,有些情况下,你的view不一定设置DataContext,但是你又想在设计阶段,能够自动提示你的view绑定的viewmodel的内 ...

  8. Gram 矩阵性质及应用

    v1,v2,-,vn 是内积空间的一组向量,Gram 矩阵定义为: Gij=⟨vi,vj⟩,显然其是对称矩阵. 其实对于一个XN⋅d(N 个样本,d 个属性)的样本矩阵而言,X⋅X′ 即为 Gram ...

  9. SQL Server 统计某个月周末的天数

    ---注意:这里统计的周末包括周5,周6,但不包括周日ALTER FUNCTION [dbo].[GetWeekDaysByMonth] ( @Year INT, @Month INT, @Day I ...

  10. [C/C++]_[VS2010使用源代码UTF8中国字符串转码ANSI问题]

    场景: 1.思想vs设置源文件UTF8编码,的代码串中国出现在它必须是utf8编码.不幸的是没有,假设源代码出现在中国字符串,在内存公交码ANSI编码. Unicode(UTF8) 代码页(65001 ...