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

图片自适应i，并缩放的方法:

设置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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDUzNTYy,size_16,color_FFFFFF,t_70