![在这里插入图片描述](https://img-blog.csdnimg.cn/247cd3dcfc97432daa7a87a71226464e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5p-g5qqs5qCR5LiK5p-g5qqs5p6c5p-g5qqs5qCR5LiL5L2g5ZKM5oiR,size_7,color_FFFFFF,t_70,g_se,x_16)
在微信小程序给图片设置了宽度,然后设置了mode=“widthfix”,但是发现有的手机上会出现第一次进入页面加载图片的瞬间,图片会被拉的很长,然后恢复正常。然后把图片的高度也设置rpx的话,就不会出现这种情况了,所以小程序里图片需要设置高度。
![在这里插入图片描述](https://img-blog.csdnimg.cn/3a1a203f8d7b4cd7b6da0d0477ddd60f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5p-g5qqs5qCR5LiK5p-g5qqs5p6c5p-g5qqs5qCR5LiL5L2g5ZKM5oiR,size_6,color_FFFFFF,t_70,g_se,x_16)
官方文档中 mode=“widthFix” 宽度不变,高度自动变化,保持原图宽高比不变,即设置图片宽度而高度自适应。
但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高,也许是高度没设置的原因。
所以需要在app.wxss
全局中把图片设置
image{
width: 100%;
height: auto;
}
即可解决问题