小程序进入页面时图片拉伸变形优化方案

小程序从接口请求过来的图片，大部分图片大小不是固定一个比例的，如果全部渲染显示在页面上，会有1到2秒的拉伸，从大到小快速闪下变形的问题，影响用户体验。

解决方法：

使用image的mode图片剪裁缩放模式，用mode='widthFix'(宽度不变，高度自动变化，保持原图宽高比不变)，然后在图片的css里加上height:auto;min-height:30rpx;加个min-height可以撑开一点距离，可以消除渲染拉伸变形一闪而过的bug。

具体示例代码如下：

<image src='...' style='width:100%;height:auto;min-height:30rpx;' mode='widthFix'></image>

补充知识

image的mode有13种模式，4种是缩放模式，9种是剪裁模式。

1、缩放模式：

scaleToFill——不保持纵横比缩放图片，使图片宽高完全拉伸至image元素

widthFix——保持宽度固定，高度自动变化，意思保持原图宽高比

aspectFit——保持纵横比缩放图片，使得长边露出，意思是能完全展示图片

aspectFill—— 保持纵横比缩放图片，使得短边露出，意思是一个方向是完整的，另一个方向会发生截取

2、剪裁模式：

top——不缩放，只显示顶部

bottom——不缩放，只显示底部

center——不缩放，只显示中间

left——不缩放，只显示左边

right——不缩放，只显示右边

top right——不缩放，只显示右上

top left——不缩放，只显示左上

bottom left——不缩放，只显示左下

bottom right——不缩放，只显示右下