diff --git a/roles/hysteria2/templates/export/global-index.html.j2 b/roles/hysteria2/templates/export/global-index.html.j2
index a39c4fc..6543616 100644
--- a/roles/hysteria2/templates/export/global-index.html.j2
+++ b/roles/hysteria2/templates/export/global-index.html.j2
@@ -251,7 +251,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);
@@ -268,6 +269,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);
@@ -275,6 +277,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;
     }
@@ -282,13 +285,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 7b929ed..b47027d 100644
--- a/roles/hysteria2/templates/export/index.html.j2
+++ b/roles/hysteria2/templates/export/index.html.j2
@@ -184,7 +184,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);
@@ -201,6 +202,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);
@@ -208,6 +210,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;
     }
@@ -215,13 +218,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 {