微信小程序-图片Image几种mode 设置图片方法

图片自适应，并缩放的方法:
设置marrgin：0与padding：0（X）
样式设置：display：flex；（√）

widthFix
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
最建议使用的图片缩放方式

mode: ‘scaleToFill’,
不保持纵横比缩放图片，使图片完全适应’

mode: ‘aspectFit’,
保持纵横比缩放图片，使图片的长边能完全显示出来’

mode: ‘aspectFill’,
保持纵横比缩放图片，只保证图片的短边能完全显示出来'。

也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

mode: ‘top’,
不缩放图片，只显示图片的顶部区域’

mode: ‘bottom’,
不缩放图片，只显示图片的底部区域’

mode: ‘center’,
不缩放图片，只显示图片的中间区域’

mode: ‘left’,
不缩放图片，只显示图片的左边区域’

mode: ‘right’,
不缩放图片，只显示图片的右边边区域’

mode: ‘top left’,
不缩放图片，只显示图片的左上边区域’

mode: ‘top right’,
不缩放图片，只显示图片的右上边区域’

mode: ‘bottom left’,
不缩放图片，只显示图片的左下边区域’

mode: ‘bottom right’,
不缩放图片，只显示图片的右下边区域'

更多查看微信开发文档：
https://developers.weixin.qq.com/miniprogram/dev/component/image.html

设置图片
一：本地图片

二：远程图片

![在这里插入图片描述]

(https://img-blog.csdnimg.cn/20200105215050128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQy

NDUzNTYy,size_16,color_FFFFFF,t_70