关于小程序img图片变形的问题

话不多说,直接先上设计图:设计图是真的很好看鸭!但是实际上长传的图片很长,导致很模糊的状态,肯定不符合要求的。
关于小程序img图片变形的问题
还好小程序有个mode属性:

scaleToFill 缩放模式(默认属性),不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

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

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

当时使用image实现图像自使用的时候,设置mode=“aspectFill”

mode=“aspectFit”——示例:
关于小程序img图片变形的问题
mode=“scaleToFill”——示例:
关于小程序img图片变形的问题
mode=“aspectFill”——示例:
关于小程序img图片变形的问题