Only works with square images

[satyavh]

Any other image format stretches/deforms the image. Solution is to generate an avatar with a background-image set to cover.

[cathal-killeen]

I am looking for this feature too. Would be nice to have

[lightsinthesky]

 _renderAsDiv() {
    const { className, round, unstyled, name, value } = this.props;
    const { internal } = this.state;
    const size = parseSize(this.props.size);
    const alt = name || value;

    const imageStyle = unstyled
      ? null
      : {
          maxWidth: "100%",
          width: size.str,
          height: size.str,
          borderRadius: round === true ? "100%" : round
        };

    return (
      <div
        className={className + " sb-avatar__image"}
        width={size.str}
        height={size.str}
        style={imageStyle}
        alt={alt}
        onError={internal && internal.fetch}
      >
        <div
          style={{
            width: "100%",
            height: "100%",
            backgroundSize: "cover",
            backgroundImage: `url(${this.state.src})`,
            backgroundPosition: "50% 50%",
            borderRadius: round === true ? "100%" : round
          }}
        />
      </div>
    );
  }