diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx
index 47231410a..5fcacf47e 100644
--- a/components/avatar/Avatar.tsx
+++ b/components/avatar/Avatar.tsx
@@ -27,6 +27,7 @@ const avatarProps = {
   srcset: PropTypes.string,
   icon: PropTypes.VNodeChild,
   alt: PropTypes.string,
+  gap: Number,
   loadError: {
     type: Function as PropType<() => boolean>,
   },
@@ -41,8 +42,6 @@ const Avatar = defineComponent({
     const isImgExist = ref(true);
     const isMounted = ref(false);
     const scale = ref(1);
-    const lastChildrenWidth = ref<number>(undefined);
-    const lastNodeWidth = ref<number>(undefined);
 
     const avatarChildrenRef = ref<HTMLElement>(null);
     const avatarNodeRef = ref<HTMLElement>(null);
@@ -56,17 +55,13 @@ const Avatar = defineComponent({
       const childrenWidth = avatarChildrenRef.value.offsetWidth; // offsetWidth avoid affecting be transform scale
       const nodeWidth = avatarNodeRef.value.offsetWidth;
       // denominator is 0 is no meaning
-      if (
-        childrenWidth === 0 ||
-        nodeWidth === 0 ||
-        (lastChildrenWidth.value === childrenWidth && lastNodeWidth.value === nodeWidth)
-      ) {
-        return;
+      if (childrenWidth !== 0 && nodeWidth !== 0) {
+        const { gap = 4 } = props;
+        if (gap * 2 < nodeWidth) {
+          scale.value =
+            nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1;
+        }
       }
-      lastChildrenWidth.value = childrenWidth;
-      lastNodeWidth.value = nodeWidth;
-      // add 4px gap for each side to get better performance
-      scale.value = nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1;
     };
 
     const handleImgLoadError = () => {