小程序中图片image展示部分处理办法

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

小程序开发中你是否发现image图片仅展示部分,没有完全展示。如下图,那么我们要如何解决呢?

不正常如图:


正常如图:


从上面两张图可以看出来,第一张如果没有对图片进行设置的话,只会展示图片的部分内容,那么关于该操作我们要如何处理呢?

说到解决方法,我们可以先来看看image的mode属性:

mode官方解释:

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。  

这里面我们需要注意的是下面四个属性:

属性描述
scaleToFill不保持纵横比缩放,使图片的宽高完全拉伸至填满 image 元素。
aspectFit保持纵横比缩放,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill保持纵横比缩放,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix宽度不变,高度自动变化,保持原图宽高比不变。
关于图片不正常展示,我们只需要使用widthFix属性即可解决:
<image src="../../static/sixhead.jpg" mode="widthFix"></image>

解释:如果想把图片完全显示出来,就用widthFix,宽度不变,高度自动变化,保持原图的比例不变