.nut-avatar {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  position: relative;
  flex: 0 0 auto; // 防止被压缩
  text-align: center;
  .avatar-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-shrink: 0;
  }
  .icon {
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .nut-icon__img {
    width: 100%;
    height: 100%;
  }
  .text {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
  }
}
.nut-avatar-large {
  width: $avatar-large-width;
  height: $avatar-large-height;
  line-height: $avatar-large-height;
}
.nut-avatar-small {
  width: $avatar-small-width;
  height: $avatar-small-height;
  line-height: $avatar-small-height;
}
.nut-avatar-normal {
  width: $avatar-normal-width;
  height: $avatar-normal-height;
  line-height: $avatar-normal-height;
}
.nut-avatar-round {
  border-radius: 50%;
  overflow: hidden;
}
.nut-avatar-square {
  border-radius: $avatar-square;
}