diff --git a/generateSite.js b/generateSite.js
index aa839bd..b279e81 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -54,7 +54,9 @@ async function generateSite() {
     <style>
         .progressive-image-container {
             position: relative;
-            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            aspect-ratio: 1; /* This will be adjusted based on the actual image */
         }
         .progressive-image {
             position: absolute;
@@ -62,11 +64,13 @@ async function generateSite() {
             left: 0;
             width: 100%;
             height: 100%;
+            object-fit: contain;
             transition: opacity 0.5s ease-in-out;
         }
         .thumbnail {
             filter: blur(10px);
             transform: scale(1.1);
+            opacity: 1;
         }
         .full-image {
             opacity: 0;
@@ -84,6 +88,7 @@ async function generateSite() {
                     class="progressive-image thumbnail" 
                     src="${image.localPath}?quality=10&width=50" 
                     alt="${image.metadata.description || ''}"
+                    onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
                 >
                 <img 
                     class="progressive-image full-image"