From 2d2d9d33de54ce2ec2c0ebfbd6fd0487e3a28b48 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Mon, 23 Mar 2020 08:46:48 +0800
Subject: [PATCH] feat(image): add scale prop to image container

---
 components/image/image.tsx      | 9 ++++++---
 pages/docs/components/image.mdx | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/image/image.tsx b/components/image/image.tsx
index 7845f40..01620f7 100644
--- a/components/image/image.tsx
+++ b/components/image/image.tsx
@@ -9,17 +9,19 @@ interface Props {
   width?: number
   height?: number
   className?: string
+  scale?: string
 }
 
 const defaultProps = {
   animation: true,
   className: '',
+  scale: '100%',
 }
 
 export type ImageProps = Props & typeof defaultProps & React.ImgHTMLAttributes<any>
 
 const Image: React.FC<ImageProps> = React.memo(({
-  src, width, height, animation, className, ...props
+  src, width, height, animation, className, scale, ...props
 }) => {
   const showAnimation = animation && width && height
   const theme = useTheme()
@@ -67,8 +69,9 @@ const Image: React.FC<ImageProps> = React.memo(({
         }
         
         img {
-          width: 100%;
-          height: 100%;
+          width: ${scale};
+          height: ${scale};
+          object-fit: scale-down;
         }
       `}</style>
     </div>
diff --git a/pages/docs/components/image.mdx b/pages/docs/components/image.mdx
index fd0435a..4ef9429 100644
--- a/pages/docs/components/image.mdx
+++ b/pages/docs/components/image.mdx
@@ -44,6 +44,7 @@ Display image content.
 | **animation** | display animation when loading  | `boolean` | - | `true` |
 | **width** | width | `number` | - | - |
 | **height** | height | `number` | - | - |
+| **scale** | scale value | `string` | - | `100%` |
 | ... | native props | `ImgHTMLAttributes` | `'alt', 'className', ...` | - |
 
 </Attributes>