adjust image responsiveness

Sitecore · Mar 8, 2024 · 393c17f · 393c17f
1 parent 1d3c0ce
commit 393c17f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Venue.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Venue.tsx
@@ -43,7 +43,6 @@ const settings = {
   speed: 500,
   autoplaySpeed: 5000,
   slidesToShow: 1,
-  adaptiveHeight: true,
   slidesToScroll: 1,
   appendDots: (dots: React.ReactNode) => (
     <div style={{ bottom: '10px' }}>
@@ -103,12 +102,21 @@ export const Default = (props: VenueProps): JSX.Element => {
         {props.fields.VenueImages != null && (
           <Box
             minWidth={{ base: '100%', md: '50%' }}
+            position={'relative'}
             as={SliderWrapper}
             mt={{ base: '10', md: '0' }}
           >
             <Slider {...settings} ref={() => setSlider(slider)}>
               {props.fields.VenueImages?.map((image, index) => (
-                <Image src={image.url} key={index} borderRadius={{ base: 'none', md: '2xl' }} />
+                <Image
+                  src={image.url}
+                  key={index}
+                  borderRadius={{ base: 'none', md: '2xl' }}
+                  width="full"
+                  height="100%"
+                  maxHeight="400px"
+                  objectFit="cover"
+                />
               ))}
             </Slider>
           </Box>

diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Venue.stories.ts b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/Venue.stories.ts
@@ -46,17 +46,17 @@ export const Default: Story = {
       VenueImages: [
         {
           name: 'Mock Item',
-          url: 'https://placehold.co/450x300/000000/FFF/png?text=Image+1',
+          url: 'https://placehold.co/450x400/000000/FFF/png?text=Image+1',
           fields: {},
         },
         {
           name: 'Mock Item',
-          url: 'https://placehold.co/450x300/CC0000/FFF/png?text=Image+2',
+          url: 'https://placehold.co/450x400/CC0000/FFF/png?text=Image+2',
           fields: {},
         },
         {
           name: 'Mock Item',
-          url: 'https://placehold.co/450x300/0000FF/FFF/png?text=Image+3',
+          url: 'https://placehold.co/450x400/0000FF/FFF/png?text=Image+3',
           fields: {},
         },
       ],