【微信小程序】image组件的4种缩放模式与9种裁剪模式

简介: 假设有一个容器(这个容器的宽高就是设置的样式),要将图片放进去。而aspectFit的特点就是保持图片不变形,且容器要“刚好”将这个图片装进去。如果原始图片比容器大,就要被等比例缩小;如果原始图片比容器小,就会被等比例放大。一直放大或缩小到图片的某一条边刚好和容器的一条边重合。

3c28c4c6783644a6b3a41843d646db0e.gif


🏆今日学习目标:第九期——image组件的4种缩放模式与9种裁剪模式

😃创作者:颜颜yan_

✨个人主页:颜颜yan_的个人主页

⏰预计时间:20分钟

🎉专栏系列:微信小程序开发


前言


哈喽大家好,本次是微信小程序专栏的第九期。在项目中,我们经常要面对图片的尺寸结合设计图的尺寸不同的情况。在这种情况下,我们必须要有所舍弃,或放弃等比例,或裁剪掉图片的一部分。本期的主要内容是image组件的4种缩放模式与9种裁剪模式。


注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~


每种模式的字面意思都很好理解。要更改图片的裁剪或缩放模式,只需要给image组件加上一个mode属性值。

缩放模式


scaleToFill


不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素。


如下,当我们添加sacleToFill模式时,图片并没有发生任何变化。这是因为sacleToFill是缩放的默认模式,如果省略了mode,则小程序也会以sacleToFill的模式来缩放图片。


sacleToFill将改变图片的高宽比,强行让图片更改为样式指定的尺寸,使图片变形。当然,如果原始图片的宽高比例和要缩放的目标宽高比例相同,则不会变形,只是整体上放大或缩小了。


c5051df5b2d041858553361e11d62153.png

ff501d9d8f7141cda0af93d73bc94a0f.png


aspectFit


保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。


假设有一个容器(这个容器的宽高就是设置的样式),要将图片放进去。而aspectFit的特点就是保持图片不变形,且容器要“刚好”将这个图片装进去。如果原始图片比容器大,就要被等比例缩小;如果原始图片比容器小,就会被等比例放大。一直放大或缩小到图片的某一条边刚好和容器的一条边重合。


如下,原始图片大于容器,就会被等比例缩小。


c61cceec232542319672a17c9bcf3242.png

6d73da265f554740aacdb19410a8994c.png


aspectFill


保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。


这个模式同样保持图片的高宽比不会变形,但会让图片完全填满整个容器。如果原始图片尺寸大于容器,则需要等比例缩小,一边刚好接触容器,另外一边等于或超出容器,这样就可以完全填满了。


bf7eaf075a4f4b759066fd7226489302.png

5919e9d00a85487fb17ade0d538822a5.png


widthFix


宽度不变,高度自动变化,保持原图宽高比不变。


这个属性的特点是,图片不会按照设定的尺寸呈现,而是让宽缩放到指定尺寸,再动态计算高度。


73ffad2a84f6431ab73809546c72d69b.png

b9774fe140a74c248025fba351def284.png


剪裁模式


top


不缩放图片,只显示图片的顶部区域。


这个模式只保留了图片的上部,裁剪掉了剩余部分。如下可以发现,图片不仅裁掉了下面的部分,水平方向上也有裁剪,是由于这个模式不会缩放图片,所有我们设置的容器不能够在水平方向上完全把图片放进去,进而水平方向上也发生了裁剪。


ca62b3157b524a73933a26cb928ee4ac.png

9f281afc51c046efa96e3b5f86038448.png


bottom


不缩放图片,只显示图片的底部区域。


df10fa6449b748e992267109794c0425.png

e5f72d0ee4e3434b841bc6f323b37aef.png


center


不缩放图片,只显示图片的中间区域。


fc5b7576211c46ecb4a41f8f162665de.png

8a1a3afbd0024307b168fdb7a0710df2.png


left


不缩放图片,只显示图片的左边区域。


1d6f2cc76dce42eab874cb6e3ef290e4.png

4e6e1fa95fd84afe903263f7b207813b.png


right


不缩放图片,只显示图片的右边区域。


49697d4a723e415abfe6f628a861a200.png

22c9ee0e2ea245b0ad5f78f09c9da524.png


top left


不缩放图片,只显示图片的左上边区域。


cfd40f88701c443998f13aa3388558df.png

2bf6b8efde504513bfa9e9972c6b4e5e.png


top right


不缩放图片,只显示图片的右上边区域。


5e2fc5e2426c44f2ab2adf1e4a000d87.png

9e38cfaa1db0419aa69f2582ea9f1e34.png


bottom left


不缩放图片,只显示图片的左下边区域。


6cb3d0fcc2f04e778a1e98982960d4d3.png

442961a4efb7462498be4e231ed829e0.png


bottom right


不缩放图片,只显示图片的右下边区域。


6116765ac5fd4c15a6ed3dc807f23338.png

d80f894943eb49f28f6645d6fb96914e.png


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏,持续更新呢~

咱们下期再见~


d20e640404404cc6bc5d1f8ab9683a3a.gif

目录
相关文章
|
15天前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
14 0
|
15天前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
18 0
|
15天前
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
19 0
|
15天前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
17 0
|
15天前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
12 0
|
15天前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
11 0
|
15天前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
16 0
|
7天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
19 7
|
7天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
21 7
|
7天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的美食推荐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的美食推荐小程序的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章