微信小程序 解决圆形头像显示图片不完全问题

最近在做微信小程序，遇到这样一个难题，绘制一个圆形的头像，但是有的图片会因为宽度大于高度而致使图片在圆形区域内显示不全，为解决这个问题，我采用了以下办法，现贴出代码共享给大家，大家如果有更好的解决方案也可以给我留言哦~

XML:
  <view style="width:130rpx;height:130rpx;border-radius:50%;overflow:hidden;text-align:center;display:flex;justify-content: center; align-items: center">
   <image src="{{headImgUrl}}"  style="width:70px;height:{{txHeight}}px" bindload='imageLoad2'></image>
 </view>

JS:
  imageLoad2: function (e) {
     var imgwidth = e.detail.width
     var  imgheight = e.detail.height
      var ratio = imgwidth / imgheight
    var viewHeight = 70/ ratio;
    if (viewHeight < 70){
        this.setData({
          txHeight: 70,
        })
      }else{
        this.setData({
          txHeight: viewHeight,
        })
      }
 
  }
 

思路总结：

   给图片设置固定的宽度后，根据宽和高的比例进行缩放计算出正常缩放下的高度，如果改高度小于设置的高度，就让要显示的他高度显示为设置的高度，否则就正常显示缩放后的高度。特意把设置的固定图片宽度设置一个大于外部圆框的宽度数值，且让图片居中显示，防止漏出图片边缘。