From 3472240908ac24539c0b2ee7f0b39e06ad9c9dfc Mon Sep 17 00:00:00 2001
From: Akash Kumar <akashstzt@gmail.com>
Date: Mon, 10 Aug 2026 15:08:35 +0530
Subject: [PATCH 1/2] fix: center and properly size event banners regardless of
 aspect ratio (#746)

Signed-off-by: Akash Kumar <akashstzt@gmail.com>
---
 src/components/EventLanding.js         |  4 +++-
 src/components/EventLanding.module.css | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/EventLanding.js b/src/components/EventLanding.js
index 82babdc5..a896da49 100644
--- a/src/components/EventLanding.js
+++ b/src/components/EventLanding.js
@@ -92,7 +92,9 @@ export default function EventLanding({ slug }) {
               ← {isZh ? "落地页" : "Landing Pages"}
             </Link>
             {event.banner && (
-              <img src={bannerUrl} alt={pick(locale, event.title)} className={styles.banner} />
+              <div className={styles.bannerWrapper}>
+                <img src={bannerUrl} alt={pick(locale, event.title)} className={styles.banner} />
+              </div>
             )}
             <h1 className={styles.title}>{pick(locale, event.title)}</h1>
             <div className={styles.meta}>
diff --git a/src/components/EventLanding.module.css b/src/components/EventLanding.module.css
index 06a29b68..9661746c 100644
--- a/src/components/EventLanding.module.css
+++ b/src/components/EventLanding.module.css
@@ -7,13 +7,23 @@
   padding: var(--hami-space-32) 0 var(--hami-space-48);
 }
 
-.banner {
+.bannerWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
+  margin-bottom: var(--hami-space-32);
+}
+
+.banner {
+  max-width: 100%;
   max-height: 480px;
-  object-fit: cover;
+  width: auto;
+  height: auto;
+  object-fit: contain;
   border-radius: var(--hami-radius-md);
   border: 1px solid var(--hami-color-border);
-  margin-bottom: var(--hami-space-32);
+  display: block;
 }
 
 .title {

From 7cee8683ea830ee3b9260470366cefabf4eb385a Mon Sep 17 00:00:00 2001
From: Akash Kumar <akashstzt@gmail.com>
Date: Mon, 10 Aug 2026 16:01:14 +0530
Subject: [PATCH 2/2] fix: use fixed-size wrapper box matching existing image
 patterns instead of conflicting width/height auto

Signed-off-by: Akash Kumar <akashstzt@gmail.com>
---
 src/components/EventLanding.module.css | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/EventLanding.module.css b/src/components/EventLanding.module.css
index 9661746c..85558429 100644
--- a/src/components/EventLanding.module.css
+++ b/src/components/EventLanding.module.css
@@ -8,21 +8,20 @@
 }
 
 .bannerWrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 100%;
-  margin-bottom: var(--hami-space-32);
+  max-width: 960px;
+  height: 480px;
+  margin: 0 auto var(--hami-space-32);
+  border-radius: var(--hami-radius-md);
+  border: 1px solid var(--hami-color-border);
+  background-color: var(--hami-color-surface);
+  overflow: hidden;
 }
 
 .banner {
-  max-width: 100%;
-  max-height: 480px;
-  width: auto;
-  height: auto;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
-  border-radius: var(--hami-radius-md);
-  border: 1px solid var(--hami-color-border);
   display: block;
 }