diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx
index f4b4ca49..5f6b76c5 100644
--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@@ -1,7 +1,7 @@
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { connectMedia } from '@utils/api/helpers/connect'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { Image, ImageSource, ImageStyle } from 'expo-image'
+import { Image, ImageContentFit, ImageSource, ImageStyle } from 'expo-image'
 import React, { useState } from 'react'
 import { AccessibilityProps, Pressable, StyleProp, View, ViewStyle } from 'react-native'
 
@@ -21,6 +21,7 @@ export interface Props {
   onPress?: () => void
   style?: StyleProp<ViewStyle>
   imageStyle?: ImageStyle
+  contentFit?: ImageContentFit
 
   dim?: boolean
   withoutTransition?: boolean
@@ -36,6 +37,7 @@ const GracefullyImage = ({
   onPress,
   style,
   imageStyle,
+  contentFit,
   dim,
   withoutTransition = false,
   enableLiveTextInteraction = false
@@ -63,6 +65,7 @@ const GracefullyImage = ({
         source={hidden ? sources.blurhash : connectMedia(source)}
         {...(!withoutTransition && !reduceMotionEnabled && { transition: { duration: 120 } })}
         style={{ flex: 1, ...imageStyle }}
+        contentFit={contentFit}
         onError={() => {
           if (
             sources.default?.uri &&
diff --git a/src/screens/ImageViewer/index.tsx b/src/screens/ImageViewer/index.tsx
index 5438b16e..eaba4d9a 100644
--- a/src/screens/ImageViewer/index.tsx
+++ b/src/screens/ImageViewer/index.tsx
@@ -159,8 +159,8 @@ const ScreenImagesViewer = ({
           }) => {
             const screenRatio = WINDOW_WIDTH / WINDOW_HEIGHT
             const imageRatio = item.width && item.height ? item.width / item.height : 1
-            const imageWidth = item.width || 100
-            const imageHeight = item.height || 100
+            const imageWidth = item.width
+            const imageHeight = item.height
 
             const maxWidthScale = item.width
               ? (item.width / WINDOW_WIDTH / PixelRatio.get()) * 4
@@ -198,16 +198,21 @@ const ScreenImagesViewer = ({
                         default: { uri: item.url },
                         remote: { uri: item.remote_url }
                       }}
-                      dimension={{
-                        width:
-                          screenRatio > imageRatio
-                            ? (WINDOW_HEIGHT / imageHeight) * imageWidth
-                            : WINDOW_WIDTH,
-                        height:
-                          screenRatio > imageRatio
-                            ? WINDOW_HEIGHT
-                            : (WINDOW_WIDTH / imageWidth) * imageHeight
-                      }}
+                      style={{ flex: 1 }}
+                      contentFit='contain'
+                      {...(imageWidth &&
+                        imageHeight && {
+                          dimension: {
+                            width:
+                              screenRatio > imageRatio
+                                ? (WINDOW_HEIGHT / imageHeight) * imageWidth
+                                : WINDOW_WIDTH,
+                            height:
+                              screenRatio > imageRatio
+                                ? WINDOW_HEIGHT
+                                : (WINDOW_WIDTH / imageWidth) * imageHeight
+                          }
+                        })}
                       enableLiveTextInteraction
                     />
                   </View>