Enhance responsive image handling in generateSite.js and styles.css. Updated CSS to ensure images maintain aspect ratio with object-fit, adjusted dimensions for better responsiveness, and improved loading behavior. This enhances visual presentation and user experience across the site.

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;
     }
 }