Avoid overflow of gallery images (#79)

* fix cover images * fix images cover
analysis-tools-dev · Jun 18, 2024 · 4697102 · 4697102
1 parent e03cb5a
commit 4697102
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/components/tools/toolPage/ToolGallery/ToolGallery.module.css b/components/tools/toolPage/ToolGallery/ToolGallery.module.css
@@ -1,7 +1,29 @@
 .galleryWrapper {
-    margin: 30px 0;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.splide__slide {
+    position: relative;
+    width: 100%;
+    height: 100%; /* Ensure the slide has a valid height */
+    overflow: hidden;
+}
+
+.splideSlide {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    overflow: hidden;
 }
 
 .screenshot {
-    border-radius: 6px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
diff --git a/components/tools/toolPage/ToolGallery/ToolGallery.tsx b/components/tools/toolPage/ToolGallery/ToolGallery.tsx
@@ -48,26 +48,27 @@ const ToolGallery: FC<ToolGalleryProps> = ({ tool, screenshots }) => {
                             screenshot.url.includes('youtube.com') ? (
                                 <SplideSlide
                                     key={`${screenshot.path}-${index}`}
-                                    // add youtube link if youtube video
                                     data-splide-youtube={screenshot.url}>
-                                    <Image
-                                        className={styles.screenshot}
-                                        width={1280}
-                                        height={720}
-                                        src={screenshot.path}
-                                        alt={`${tool.name} screenshot`}
-                                    />
+                                    <div className={styles.splideSlide}>
+                                        <Image
+                                            className={styles.screenshot}
+                                            src={screenshot.path}
+                                            alt={`${tool.name} screenshot`}
+                                            fill={true}
+                                        />
+                                    </div>
                                 </SplideSlide>
                             ) : (
                                 <SplideSlide
                                     key={`${screenshot.path}-${index}`}>
-                                    <Image
-                                        className={styles.screenshot}
-                                        width={1280}
-                                        height={720}
-                                        src={screenshot.path}
-                                        alt={`${tool.name} screenshot`}
-                                    />
+                                    <div className={styles.splideSlide}>
+                                        <Image
+                                            className={styles.screenshot}
+                                            src={screenshot.path}
+                                            alt={`${tool.name} screenshot`}
+                                            fill={true}
+                                        />
+                                    </div>
                                 </SplideSlide>
                             ),
                         )}