.nut-avatar {
  position: relative;
  display: inline-block;
  flex: 0 0 auto; // 防止被压缩
  text-align: center;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .nut-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }
}

.nut-avatar-large {
  width: $avatar-large-width;
  height: $avatar-large-height;
  line-height: $avatar-large-height;
}

.nut-avatar-normal {
  width: $avatar-normal-width;
  height: $avatar-normal-height;
  line-height: $avatar-normal-height;
}

.nut-avatar-small {
  width: $avatar-small-width;
  height: $avatar-small-height;
  line-height: $avatar-small-height;
}

.nut-avatar-square {
  border-radius: $avatar-square;
}

.nut-avatar-round {
  border-radius: 50%;
}

.nut-avatar-square,
.nut-avatar-round {
  overflow: hidden;
}