您的当前位置:首页>全部文章>文章详情

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

发表于:2021-07-03 23:27:47浏览:680次TAG: #小程序 #图片拉伸 #图片变形

小程序从接口请求过来的图片,大部分图片大小不是固定一个比例的,如果全部渲染显示在页面上,会有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——不缩放,只显示右下