文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 360
阅读 9
收藏 0

这里写图片描述

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"/>

本文转载自:http://blog.csdn.net/u014360817/article/details/52675624

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
美团外卖小程序的探索和实践(演讲内容整理)丨掘金开发者大会

2017年1月9日,微信官方在2017微信公开课Pro上发布的小程序正式上线,开创了小程序开发的时代。我们的美团外卖的业务也逐步加入到小程序开发的队伍中。小程序有着无需安装、触手可及、用完即...

掘金官方
09/25
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
掘金开发者大会 ∙ 微信小程序专场正式启动

一场迟来的聚会 自2017年1月微信小程序正式上线以来,应用数与开发者数持续增长,目前已经有超过100万个微信小程序发布且相关开发者也超过了150万。同样,我们也可以通过掘金的数据看到 2017...

掘金官方
08/07
0
0
微信小程序开发框架从入门到放弃

用框架是不可能用框架的,这辈子都不可能用框架。 微信小程序上手成本低,开发成本低,流量红利,推广成本低等等,很多公司的创业项目都会首选小程序来试水,小程序开发太火爆了,苦逼了前端工...

Runner羊
07/24
0
0
一大波编程视频资料赠送(亲自整理)

为了感恩大家长久以来的关注和支持,小编准备了一些福利,整理了包含前端,Java,产品经理,微信小程序,Python,网站源码,Android应用视频教程,微信公众平台开发教程及材料等资源合集大放...

祈澈姑娘
05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

LSM-Tree 大数据索引技术

一、LSM-Tree概述 核心思想就是放弃部分读能力,换取写入能力的最大化。LSM-Tree ,这个概念就是结构化合并树(Log-Structured Merge Tree)的意思,它的核心思路其实非常简单,就是假定内存...

PeakFang-BOK
12分钟前
0
0
vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新...

peakedness丶
18分钟前
0
0
Weblogic补丁升级操作步骤

linux平台: weblogic1036 1:停止weblogic服务 2:打FMJJ补丁 a:获取weblogic_home目录并执行命令:export weblogic_home="/weblogic/wls1036_x64",(此目录一般为目录“user_projects”上...

fang_faye
31分钟前
0
0
04-《Apache Tomcat 9 User Guide》之部署项目

1.Introduction Deployment is the term used for the process of installing a web application (either a 3rd party WAR or your own custom web application) into the Tomcat server. 部......

飞鱼说编程
32分钟前
0
0
一位十年的老码农他眼中的区块链

大家可能已经听说过比特币、莱特币、以太币等等,以及它们作为一种新货币在市场上的潜力。 有趣的是,很多投资比特币的人也提到了区块链之类的东西。 显然,这项技术是比特币等其他东西的"基...

小刀爱编程
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部