From b8c6a83bedb54d1667e2d5af892556b86dfb1ab8 Mon Sep 17 00:00:00 2001
From: Miao Yunliang <yunliangmiao@gmail.com>
Date: Mon, 4 May 2020 10:26:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(components):=20h5=E7=AB=AFimage=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=BC=A9=E6=94=BE=E6=96=B9=E5=BC=8F=E6=94=B9=E7=94=A8?=
 =?UTF-8?q?css=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/image/index.js             | 14 ++-----------
 .../src/components/image/style/index.scss     | 21 +++++++------------
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/packages/taro-components/src/components/image/index.js b/packages/taro-components/src/components/image/index.js
index 2ae39d1f8c1e..e7ee5f9dac41 100644
--- a/packages/taro-components/src/components/image/index.js
+++ b/packages/taro-components/src/components/image/index.js
@@ -9,8 +9,7 @@ class Image extends Nerv.Component {
   constructor () {
     super(...arguments)
     this.state = {
-      isLoaded: false,
-      aspectFillMode: 'width'
+      isLoaded: false
     }
     this.imageOnLoad = this.imageOnLoad.bind(this)
     this.observer = {}
@@ -46,11 +45,6 @@ class Image extends Nerv.Component {
         height: this.imgRef.height
       }
     })
-    if (this.imgRef.naturalWidth > this.imgRef.naturalHeight) {
-      this.setState({ aspectFillMode: 'width' })
-    } else {
-      this.setState({ aspectFillMode: 'height' })
-    }
     onLoad && onLoad(e)
   }
 
@@ -65,7 +59,6 @@ class Image extends Nerv.Component {
       imgProps,
       ...reset
     } = this.props
-    const { aspectFillMode } = this.state
     const cls = classNames(
       'taro-img',
       {
@@ -75,10 +68,7 @@ class Image extends Nerv.Component {
     )
     const imgCls = classNames(
       'taro-img__mode-' +
-        (mode || 'scaleToFill').toLowerCase().replace(/\s/g, ''),
-      {
-        [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
-      }
+        (mode || 'scaleToFill').toLowerCase().replace(/\s/g, '')
     )
 
     return (
diff --git a/packages/taro-components/src/components/image/style/index.scss b/packages/taro-components/src/components/image/style/index.scss
index f8b72794839e..6db37336b3a3 100644
--- a/packages/taro-components/src/components/image/style/index.scss
+++ b/packages/taro-components/src/components/image/style/index.scss
@@ -13,26 +13,19 @@ img[src=""] {
   }
   &__mode {
     &-scaletofill {
+      object-fit: contain;
       width: 100%;
       height: 100%;
     }
     &-aspectfit {
-      max-width: 100%;
-      max-height: 100%;
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
     }
     &-aspectfill {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      &--width {
-        min-width: 100%;
-        height: 100%;
-      }
-      &--height {
-        width: 100%;
-        min-height: 100%;
-      }
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
     }
     &-widthfix {
       width: 100%;