diff --git a/web/components/avatar.css b/web/components/avatar.css
--- a/web/components/avatar.css
+++ b/web/components/avatar.css
@@ -55,3 +55,7 @@
   width: 112px;
   min-width: 112px;
 }
+
+.imgContainer {
+  object-fit: cover;
+}
diff --git a/web/components/avatar.react.js b/web/components/avatar.react.js
--- a/web/components/avatar.react.js
+++ b/web/components/avatar.react.js
@@ -17,6 +17,7 @@
   const { avatarInfo, size } = props;
 
   const containerSizeClassName = classnames({
+    [css.imgContainer]: avatarInfo.type === 'image',
     [css.micro]: size === 'micro',
     [css.small]: size === 'small',
     [css.large]: size === 'large',