4

app.js

@@ -117,6 +117,7 @@ function openModal(srcOriginal, srcPreview, photo) {
     img.src = srcPreview;
     img.style.maxWidth = "100%";
     img.style.maxHeight = "100%";
+    img.style.objectFit = "contain";
     container.appendChild(img);
 
     const full = new Image();

style.css

@@ -24,6 +24,7 @@ header {
   border-radius: 4px;
   border: 1px solid #ddd;
   background: white;
+  position: relative;
 }
 
 .thumb img {
@@ -33,6 +34,22 @@ header {
   display: block;
 }
 
+/* Icona play per i video */
+.video-thumb {
+  position: relative;
+}
+
+.play-icon {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: rgba(0,0,0,0.6);
+  color: white;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
 /* Modal */
 .modal {
   position: fixed;
@@ -48,15 +65,31 @@ header {
   display: flex;
 }
 
+/* 🔥 FIX IMPORTANTE: il modal ha dimensione fissa */
 .modal-content {
-  max-width: 90vw;
-  max-height: 90vh;
+  width: 90vw;
+  height: 90vh;
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.modal-content img {
-  max-width: 100%;
-  max-height: 100%;
+/* 🔥 FIX: contenitore media sempre a dimensione piena */
+#modalMediaContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 🔥 FIX: preview e full-res occupano lo stesso spazio */
+#modalMediaContainer img,
+#modalMediaContainer video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
   display: block;
 }
 
@@ -140,18 +173,3 @@ header {
   background: #ddd;
   outline: none;
 }
-
-.video-thumb {
-  position: relative;
-}
-
-.play-icon {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  background: rgba(0,0,0,0.6);
-  color: white;
-  padding: 4px 6px;
-  border-radius: 4px;
-  font-size: 14px;
-}