Fix styling images

centrifuge · Jul 11, 2024 · 5f87d7d · 5f87d7d
1 parent da33ea5
commit 5f87d7d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
@@ -10,22 +10,23 @@ export type ImageProps = {
   }
   alt?: string
   objectFit?: CSSProperties['objectFit']
-  objectPosition?: CSSProperties['objectPosition']
+  objectPosition?: CSSProperties['objectPosition'],
+  styles?: React.CSSProperties
 }
 
-export function Image({ data, alt, objectFit = 'cover', objectPosition = 'center' }: ImageProps) {
+export function Image({ data, alt, objectFit = 'cover', objectPosition = 'center', styles }: ImageProps) {
   if (!data) {
     console.warn('No image data')
     return null
   }
 
   if (data.extension === 'svg') {
-    return <img src={data.publicURL} alt={alt || ''} />
+    return <img src={data.publicURL} alt={alt || ''} style={{ ...styles }} />
   }
 
   const image = getImage(data)
   if (image) {
-    return <GatsbyImage image={image} alt={alt || ''} objectFit={objectFit} objectPosition={objectPosition} />
+    return <GatsbyImage image={image} alt={alt || ''} objectFit={objectFit} objectPosition={objectPosition} style={{ ...styles }} />
   }
 
   return null

diff --git a/src/components/partner-list/index.tsx b/src/components/partner-list/index.tsx
@@ -31,15 +31,15 @@ export function PartnerList({ partners }: PartnerListProps) {
             <Shelf as="ul" m={0} p={0} gap={4} alignItems="center" role="list" style={{ opacity: isOverflow ? 0 : 1 }}>
               {partners.map(({ image, alt }, index) => (
                 <li key={`${alt}-${index}`}>
-                  <Image data={image} />
+                  <Image data={image} objectFit="contain" styles={{ width: 120, height: 20 }} />
                 </li>
               ))}
             </Shelf>
 
             {isOverflow && (
               <Marquee gradient={false} speed={80} className="marquee-container">
                 {partners.map(({ image, alt }, index) => (
-                  <Image key={`${alt}-${index}`} data={image} />
+                  <Image key={`${alt}-${index}`} data={image} styles={{ width: 120, height: 20, objectFit: "contain" }} />
                 ))}
               </Marquee>
             )}