diff --git a/src/files-and-uploads/FileThumbnail.jsx b/src/files-and-uploads/FileThumbnail.jsx
index d304d0f4e6..720e05e2c8 100644
--- a/src/files-and-uploads/FileThumbnail.jsx
+++ b/src/files-and-uploads/FileThumbnail.jsx
@@ -22,7 +22,13 @@ const AssetThumbnail = ({
     <div className="row justify-content-center align-itmes-center">
       {thumbnail ? (
         <Image
-          style={{ width: '503px', height: '281px' }}
+          style={{
+            width: '503px',
+            height: '281px',
+            objectFit: 'contain',
+            maxWidth: '100%',
+            maxHeight: '100%',
+          }}
           className="border rounded p-1"
           src={src}
           alt={`Thumbnail of ${displayName}`}
diff --git a/src/files-and-uploads/table-components/table-custom-columns/ThumbnailColumn.jsx b/src/files-and-uploads/table-components/table-custom-columns/ThumbnailColumn.jsx
index cfbbc962ff..a221528839 100644
--- a/src/files-and-uploads/table-components/table-custom-columns/ThumbnailColumn.jsx
+++ b/src/files-and-uploads/table-components/table-custom-columns/ThumbnailColumn.jsx
@@ -14,7 +14,17 @@ const ThumbnailColumn = ({ row }) => {
   return (
     <div className="row align-items-center justify-content-center m-0 p-3">
       {thumbnail ? (
-        <Image src={src} style={{ height: '76px', width: '135.71px' }} className="border rounded p-1" />
+        <Image
+          src={src}
+          style={{
+            height: '76px',
+            width: '135.71px',
+            objectFit: 'contain',
+            maxWidth: '100%',
+            maxHeight: '100%',
+          }}
+          className="border rounded p-1"
+        />
       ) : (
         <div className="row border justify-content-center align-items-center rounded m-0" style={{ height: '76px', width: '135.71px' }}>
           <Icon src={src} style={{ height: '48px', width: '48px' }} />