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

六月初六月初 小程序（支） 2020-03-05 22:46:22

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

不正常如图：


正常如图：


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

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

mode官方解释：

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

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

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

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


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！