💄 style: Add objectFit props to images

lobehub · Dec 1, 2023 · 7e29b7d · 7e29b7d
1 parent c5d3b57
commit 7e29b7d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/Image/index.tsx b/src/Image/index.tsx
@@ -13,6 +13,7 @@ export interface ImageProps extends AntImageProps {
   alwaysShowActions?: boolean;
   isLoading?: boolean;
   minSize?: number | string;
+  objectFit?: 'cover' | 'contain';
   size?: number | string;
 }
 
@@ -26,9 +27,10 @@ const Image = memo<ImageProps>(
     size = '100%',
     actions,
     alwaysShowActions,
+    objectFit = 'cover',
     ...rest
   }) => {
-    const { styles, cx, theme } = useStyles({ alwaysShowActions, minSize, size });
+    const { styles, cx, theme } = useStyles({ alwaysShowActions, minSize, objectFit, size });
     const mergePreivew = usePreview(preview);
 
     if (isLoading)

diff --git a/src/Image/style.ts b/src/Image/style.ts
@@ -8,7 +8,13 @@ export const useStyles = createStyles(
       minSize,
       size,
       alwaysShowActions,
-    }: { alwaysShowActions?: boolean; minSize?: number | string; size?: number | string } = {},
+      objectFit,
+    }: {
+      alwaysShowActions?: boolean;
+      minSize?: number | string;
+      objectFit?: string;
+      size?: number | string;
+    } = {},
   ) => {
     const SIZE = typeof size === 'number' ? `${size}px` : size;
     const MIN_SIZE = typeof minSize === 'number' ? `${minSize}px` : minSize;
@@ -38,7 +44,7 @@ export const useStyles = createStyles(
           height: ${SIZE} !important;
           min-height: ${MIN_SIZE} !important;
 
-          object-fit: contain;
+          object-fit: ${objectFit || 'cover'};
         }
       `,
       imageOff: isDarkMode