小程序中等比例缩放大小，并居中设置

小程序中等比例缩放大小，并居中设置

image标签直接设置width或者height的值，只能是固定的值，另外一个值不会跟着等比例变化。

<image src="" mode="widthFix" style="width: 100%;"></image>

解决方法：利用image的属性mode=“widthFix”，设置宽度，高度会随比例变化。

我应用的场景是设置头像，最后要显示一个圆形的头像，直接用上面的代码，不会居中显示，我又在外面套了一层，代码如下：

<view style="width: 116rpx;height: 116rpx;display: flex;align-items: center;justify-content: center;background-color: #fff;border-radius: 50%;overflow: hidden;">
	<image src="" mode="widthFix" style="width: 100%;"></image>
</view>

记录自己遇到的问题，也希望可以帮助到遇到一样问题的人。

顺便附上image的mode所有属性

属性	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。