From 2eaf46383ec15b03ae259487a06436280ce3c3d0 Mon Sep 17 00:00:00 2001
From: huoyueyuyuan <huoyueyuyuan@126.com>
Date: Wed, 6 Sep 2023 16:44:23 +0800
Subject: [PATCH] Fixed : Activity Carousel Image layout error (#198)

---
 .../activity/[name]/activityDetail.module.less |  7 -------
 pages/activity/[name]/index.tsx                | 18 +++++++++++-------
 2 files changed, 11 insertions(+), 14 deletions(-)
 delete mode 100644 pages/activity/[name]/activityDetail.module.less

diff --git a/pages/activity/[name]/activityDetail.module.less b/pages/activity/[name]/activityDetail.module.less
deleted file mode 100644
index 9f159926..00000000
--- a/pages/activity/[name]/activityDetail.module.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.carouselImageHeight {
-  height: 36vh;
-  width: 48vh;
-  @media screen and (max-width: 620px) {
-    width: 100%;
-  }
-}
diff --git a/pages/activity/[name]/index.tsx b/pages/activity/[name]/index.tsx
index 6dd14fc2..bf28b9d7 100644
--- a/pages/activity/[name]/index.tsx
+++ b/pages/activity/[name]/index.tsx
@@ -43,7 +43,6 @@ import { isServer, Media } from '../../../models/Base';
 import { i18n } from '../../../models/Base/Translation';
 import sessionStore from '../../../models/User/Session';
 import { convertDatetime } from '../../../utils/time';
-import styles from './activityDetail.module.less';
 
 const { t } = i18n;
 
@@ -279,15 +278,20 @@ export default class ActivityPage extends PureComponent<ActivityPageProps> {
           <Carousel>
             {((banners || []) as Media[]).map(({ uri }) => (
               <Carousel.Item key={uri}>
-                <Image
-                  className={`d-block object-fit-cover ${styles.carouselImageHeight}`}
-                  fluid
-                  src={uri}
-                  alt={name}
-                />
+                <div
+                  className="d-flex align-items-center"
+                  style={{ height: '45vh' }}
+                >
+                  <Image
+                    className=" w-100 h-100 object-fit-cover"
+                    src={uri}
+                    alt={name}
+                  />
+                </div>
               </Carousel.Item>
             ))}
           </Carousel>
+
           <Col className="d-flex flex-column justify-content-start">
             <h2>{displayName}</h2>
             <aside className="pb-2">