diff --git a/generateSite.js b/generateSite.js
index 7a07907..0d65613 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -55,15 +55,18 @@ async function generateSite() {
         .progressive-image-container {
             width: 100%;
             max-width: 100vw;
+            max-height: 100vh;
             margin: 0 auto;
             display: grid;  /* Use grid for overlay */
         }
         .progressive-image {
             width: 100%;
-            height: auto;
+            height: 100%;
             max-width: 100%;
+            max-height: 100vh;
             grid-area: 1 / 1;  /* Stack images in same grid cell */
             transition: opacity 0.5s ease-in-out;
+            object-fit: contain; /* Maintain aspect ratio within bounds */
         }
         .thumbnail {
             filter: blur(10px);
diff --git a/public/styles.css b/public/styles.css
index 2d07a33..0ea06fe 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -14,23 +14,27 @@ body {
 .image-container {
     position: relative;
     height: 100vh;
-    width: auto;
+    width: 100vw;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 img {
-    height: 100vh;
+    max-height: 100vh;
+    max-width: 100vw;
     width: auto;
+    height: auto;
     display: block;
     position: relative;
+    object-fit: contain;
 }
 
 @media (max-aspect-ratio: 1/1) {
     img {
         height: auto;
         width: 100vw;
+        max-height: 100vh;
     }
 }