diff --git a/roles/hysteria2/templates/export/global-index.html.j2 b/roles/hysteria2/templates/export/global-index.html.j2
index 8de25c4..d3b4635 100644
--- a/roles/hysteria2/templates/export/global-index.html.j2
+++ b/roles/hysteria2/templates/export/global-index.html.j2
@@ -262,7 +262,8 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1.5rem;
+      padding: 1.75rem 1rem;
+      box-sizing: border-box;
       background: rgba(8, 12, 18, 0.72);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
@@ -279,6 +280,7 @@
     .lightbox-panel {
       position: relative;
       max-width: min(94vw, 640px);
+      max-height: calc(100dvh - 3.5rem);
       width: 100%;
       padding: 1.25rem 1.25rem 1rem;
       background: var(--bg-card);
@@ -286,6 +288,7 @@
       border-radius: 18px;
       box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
       text-align: center;
+      overflow: auto;
       transform: translateY(12px) scale(0.96);
       transition: transform 0.22s ease;
     }
@@ -293,13 +296,18 @@
       transform: translateY(0) scale(1);
     }
     .lightbox-panel img {
-      width: 100%;
-      max-width: 560px;
+      display: block;
+      width: auto;
       height: auto;
+      max-width: min(560px, 100%);
+      max-height: min(560px, calc(100dvh - 14rem));
+      margin: 0 auto;
       aspect-ratio: 1;
+      object-fit: contain;
       background: #fff;
       border-radius: 12px;
       padding: 1rem;
+      box-sizing: border-box;
       image-rendering: pixelated;
     }
     .lightbox-caption {
diff --git a/roles/hysteria2/templates/export/index.html.j2 b/roles/hysteria2/templates/export/index.html.j2
index 47299e1..2801dc9 100644
--- a/roles/hysteria2/templates/export/index.html.j2
+++ b/roles/hysteria2/templates/export/index.html.j2
@@ -193,7 +193,8 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1.5rem;
+      padding: 1.75rem 1rem;
+      box-sizing: border-box;
       background: rgba(8, 12, 18, 0.72);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
@@ -210,6 +211,7 @@
     .lightbox-panel {
       position: relative;
       max-width: min(94vw, 640px);
+      max-height: calc(100dvh - 3.5rem);
       width: 100%;
       padding: 1.25rem 1.25rem 1rem;
       background: var(--bg-card);
@@ -217,6 +219,7 @@
       border-radius: 18px;
       box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
       text-align: center;
+      overflow: auto;
       transform: translateY(12px) scale(0.96);
       transition: transform 0.22s ease;
     }
@@ -224,13 +227,18 @@
       transform: translateY(0) scale(1);
     }
     .lightbox-panel img {
-      width: 100%;
-      max-width: 560px;
+      display: block;
+      width: auto;
       height: auto;
+      max-width: min(560px, 100%);
+      max-height: min(560px, calc(100dvh - 14rem));
+      margin: 0 auto;
       aspect-ratio: 1;
+      object-fit: contain;
       background: #fff;
       border-radius: 12px;
       padding: 1rem;
+      box-sizing: border-box;
       image-rendering: pixelated;
     }
     .lightbox-caption {