在微信小程序的开发过程中,我们会遇到不同尺寸的图片,在容器大小规定的情况下,如果不对图片进行处理,会造成图片拉伸失真

微信小程序图片配置
图片mode设置
如果图片容器为1:1,图片比例为2:1
mode未设置,也就是默认的(不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素)
原图
微信上显示
这个不保持缩放比例,就可以看出宽度被压缩了一般,图片明显失真

而将mode改为 aspectFill (缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。)
在这里插入图片描述
不同的比例用不同的mode来适配

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐