diff --git a/viewer/static/css/styles.css b/viewer/static/css/styles.css
index f41e822..aec9fd1 100644
--- a/viewer/static/css/styles.css
+++ b/viewer/static/css/styles.css
@@ -179,19 +179,51 @@ body {
 .image-content {
     overflow: auto;
     padding: 18px;
+    flex: 1 1 auto; /* occupy available vertical space inside main-area */
+    display: flex;
+    align-items: center; /* center the image vertically */
+    justify-content: center;
+    box-sizing: border-box; /* include padding in height calculations */
 }
 
 .image-wrapper {
+    /* Shrink-wrap exactly to the image. Using inline-block and zero
+       line-height avoids extra inline spacing so the wrapper's width
+       matches the rendered image width exactly. */
     display: inline-block;
-    max-width: calc(100% - 40px);
+    line-height: 0;
     border-radius: 14px;
-    overflow: hidden;
+    overflow: visible;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
+    /* Ensure the wrapper centers inside the flex parent. When the
+       wrapping anchor is a flex container the wrapper is a flex item,
+       so left/right auto margins will center it reliably. This fixes
+       cases where the image appeared left-aligned. */
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Ensure the clickable anchor that wraps the image fills the flex container
+   so percentage-based heights on the inner wrapper/image resolve correctly. */
+.image-content > a {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
 }
 
 .image-full {
     display: block;
-    max-width: 100%;
+    /* Constrain by both available width and height. Use a viewport-based
+       max-height to ensure the image never forces the page to scroll. The
+       exact topbar/controls height can vary; 120px is a conservative
+       approximation (top bar + padding). If you want pixel-perfect, we can
+       compute this from the layout or expose a CSS variable. */
+    max-width: calc(100%);
+    max-height: calc(100vh - 120px);
+    width: auto;
     height: auto;
     border-radius: 14px;
 }
diff --git a/viewer/templates/image_view.html b/viewer/templates/image_view.html
index e2027fb..f7230f5 100644
--- a/viewer/templates/image_view.html
+++ b/viewer/templates/image_view.html
@@ -144,7 +144,7 @@
                 </div>
 
                 <section class="gallery-scroll flex-grow-1 d-flex">
-                    <div class="image-content w-100 d-flex justify-content-center align-items-start">
+                    <div class="image-content w-100">
                         <a href="{{ image_path }}" target="_blank">
                             <div class="image-wrapper">
                                 <img src="{{ image_path }}" alt="{{ image_path.name }}" class="image-full">