微信小程序 Image组件实例详解
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
image组件也是一个程序不可缺少的，可以这样说一个app中image组件随处可以看到，一般 image有两种加载方式第一种是网络图片第二种是本地图片资源，都用src属性去指定。
重点属性：
三种缩放模式
九种剪切方式
wxml
<!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来 --> <view>aspectFit 保持纵横比缩放图片，只保证图片的短边能完全显示出来</view> <image style="width: 100%; height:100%" mode="aspectFit" src="http://9i0i.com/pic.php?p=../../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="http://9i0i.com/pic.php?p=../../image/image.jpg"/> <view>left 不缩放图片，只显示图片的左边区域</view> <image style="width: 100%; height: 100%" mode="left" src="http://9i0i.com/pic.php?p=../../image/image.jpg"/> <view>top right 不缩放图片，只显示图片的右上边区域</view> <image style="width: 100%; height: 100%" mode="top right" src="http://9i0i.com/pic.php?p=../../image/image.jpg"/>
相关文章：
hello WeApp icon组件
Window text组件 switch组件
tabBar底部导航 progress组件 action-sheet
应用生命周期 button组件 modal组件
页面生命周期 checkbox组件 toast组件
模块化详 form组件详 loading 组件
数据绑定 input 组件 navigator 组件
View组件 picker组件 audio 组件
scroll-view组件 radio组件 video组件
swiper组件 slider组件 Image组件
相关文章
这篇文章主要介绍了微信小程序实现拖拽 image 触摸事件监听的实例的相关资料,这里提供image触摸并监听的简单实例，需要的朋友可以参考下2017-08-08
本文使用原生js的AudioContext接口实现一个划过菜单播放天空之城的鼠标特效,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了微信小程序实现缓存根据不同的id来进行设置和读取缓存的相关资料,需要的朋友可以参考下2017-06-06
这篇文章要给大家分享的是JavaScript的单线程和异步，其实单线程和异步确实不能同时成为一个语言的特性，js选择了成为单线程的语言，所以它本身不可能是异步的，但js宿主环境是多线程，宿主环境通过某种方式使js具备了异步属性，下面就来具体介绍,需要的朋友可以参考一下2021-10-10
这篇文章主要为大家介绍了webpack5之devServer的常用配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要为大家介绍了TypeScript?泛型推断实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了nuxt.js 多环境变量配置，一般在香米开发中会有三个环境开发环境也叫测试环境(test) 、RC环境也叫预发布环境(rc) 、线上环境(production) 下面来看看文章内容的详细介绍,需要的朋友可以参考一下2021-11-11
理解js中原型、原型链这个概念，绝对是帮助我们更深入学习js的必要一步，比如，如果js开发者想理解js继承，new关键字原理，甚至封装组件、优化代码，弄明白js中原型、原型链更是前提条件。本篇文章，用最简洁的文字，清楚明白讲解原型链相等关系和原型、原型链存在的意义2021-09-09
JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧，在平时的工作中可以大大的缩短代码量和开发时间。,需要的朋友可以参考下面文章内容哟2021-09-09
最新评论