diff --git a/web/components/avatar.css b/web/components/avatar.css
index 9940b55bf..86ba383a1 100644
--- a/web/components/avatar.css
+++ b/web/components/avatar.css
@@ -1,57 +1,61 @@
 .emojiContainer {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .emojiMicro {
   font-size: 9px;
   height: 16px;
   line-height: 16px;
 }
 
 .emojiSmall {
   font-size: 14px;
   height: 24px;
   line-height: 24px;
 }
 
 .emojiLarge {
   font-size: 28px;
   height: 42px;
   line-height: 42px;
 }
 
 .emojiProfile {
   font-size: 80px;
   height: 112px;
   line-height: 112px;
 }
 
 .micro {
   border-radius: 8px;
   height: 16px;
   width: 16px;
   min-width: 16px;
 }
 
 .small {
   border-radius: 12px;
   height: 24px;
   width: 24px;
   min-width: 24px;
 }
 
 .large {
   border-radius: 21px;
   height: 42px;
   width: 42px;
   min-width: 42px;
 }
 
 .profile {
   border-radius: 56px;
   height: 112px;
   width: 112px;
   min-width: 112px;
 }
+
+.imgContainer {
+  object-fit: cover;
+}
diff --git a/web/components/avatar.react.js b/web/components/avatar.react.js
index f29de688c..2dc8537f5 100644
--- a/web/components/avatar.react.js
+++ b/web/components/avatar.react.js
@@ -1,69 +1,70 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import type { ResolvedClientAvatar } from 'lib/types/avatar-types';
 
 import css from './avatar.css';
 import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +avatarInfo: ResolvedClientAvatar,
   +size: 'micro' | 'small' | 'large' | 'profile',
 };
 
 function Avatar(props: Props): React.Node {
   const { avatarInfo, size } = props;
 
   const containerSizeClassName = classnames({
+    [css.imgContainer]: avatarInfo.type === 'image',
     [css.micro]: size === 'micro',
     [css.small]: size === 'small',
     [css.large]: size === 'large',
     [css.profile]: size === 'profile',
   });
 
   const emojiSizeClassName = classnames({
     [css.emojiContainer]: true,
     [css.emojiMicro]: size === 'micro',
     [css.emojiSmall]: size === 'small',
     [css.emojiLarge]: size === 'large',
     [css.emojiProfile]: size === 'profile',
   });
 
   const emojiContainerColorStyle = React.useMemo(() => {
     if (avatarInfo.type === 'emoji') {
       return { backgroundColor: `#${avatarInfo.color}` };
     }
     return undefined;
   }, [avatarInfo.color, avatarInfo.type]);
 
   const avatar = React.useMemo(() => {
     if (avatarInfo.type === 'image') {
       return (
         <img
           src={avatarInfo.uri}
           alt="image avatar"
           className={containerSizeClassName}
         />
       );
     }
 
     return (
       <div className={containerSizeClassName} style={emojiContainerColorStyle}>
         <div className={emojiSizeClassName}>{avatarInfo.emoji}</div>
       </div>
     );
   }, [
     avatarInfo.emoji,
     avatarInfo.type,
     avatarInfo.uri,
     containerSizeClassName,
     emojiContainerColorStyle,
     emojiSizeClassName,
   ]);
 
   return shouldRenderAvatars ? avatar : null;
 }
 
 export default Avatar;