图片自适应,并缩放的方法:
设置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