diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
index b79d0e73..103c7341 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
@@ -171,14 +171,7 @@
         *ngIf="fileDownloadUrl"
         [src]="fileDownloadUrl"
         [style.width]="'auto'"
-        [style.height]="
-          naturalHeight > imageContainer.clientHeight
-            ? ((imageContainer.clientHeight - 20) / naturalHeight) *
-                (zoomRatio / 100) *
-                naturalHeight +
-              'px'
-            : naturalHeight + 'px'
-        "
+        [style.height]="getImageHeight(imageContainer.clientHeight)"
         (load)="onLoadFileDownloadUrl(downloadImage)"
       />
     </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
index be3ab5ce..d07e25cc 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts
@@ -82,4 +82,14 @@ export class ImageViewerComponent implements OnInit {
 
     this.changeDetectorRef.detectChanges();
   }
+
+  getImageHeight(containerHeight: number): string {
+    const realContainerHeight = containerHeight - 20;
+    const oriHeight =
+      this.naturalHeight > realContainerHeight
+        ? realContainerHeight
+        : this.naturalHeight;
+
+    return oriHeight * (this.zoomRatio / 100) + 'px';
+  }
 }