fix: Token page images

drake-nathan · Oct 12, 2023 · 7b2d53e · 7b2d53e
1 parent 2b39fe9
commit 7b2d53e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/components/TokenPage/Module/TokenModule.styled.tsx b/components/TokenPage/Module/TokenModule.styled.tsx
@@ -131,3 +131,10 @@ export const InnerContainer = styled.div<Props>`
     width: auto;
   }
 `;
+
+export const Image = styled.img<{ $aspectRatio: number }>`
+  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
+  object-fit: cover;
+  width: 100%;
+  border: 1px solid ${({ theme: { colors } }) => colors.textMain};
+`;
diff --git a/components/TokenPage/Module/TokenModule.tsx b/components/TokenPage/Module/TokenModule.tsx
@@ -65,11 +65,10 @@ const TokenModule = ({ token, project }: Props): JSX.Element => {
               width={width}
             />
           ) : (
-            <Image
+            <St.Image
               src={imageMid || image}
               alt="Token Image"
-              width={width}
-              height={height}
+              $aspectRatio={aspectRatio}
             />
           )}
           <BottomBar token={token} project={project} />