From de95d1da8183d0264d0979e00867247360100f8b Mon Sep 17 00:00:00 2001
From: ZakaryCode <zakarycode@gmail.com>
Date: Fri, 31 Jul 2020 11:18:06 +0800
Subject: [PATCH] Merge branch '2.x' of https://github.com/myl0204/taro into
 myl0204-2.x

---
 .../src/components/image/index.js             | 14 ++-----------
 .../src/components/image/style/index.css      | 21 ++++++-------------
 2 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/packages/taro-components/src/components/image/index.js b/packages/taro-components/src/components/image/index.js
index a06f1a3b3722..beeb5d6044ef 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.css b/packages/taro-components/src/components/image/style/index.css
index 0fd79c27aebe..71ead6395b11 100644
--- a/packages/taro-components/src/components/image/style/index.css
+++ b/packages/taro-components/src/components/image/style/index.css
@@ -16,30 +16,21 @@ img[src=""] {
 }
 
 .taro-img__mode-scaletofill {
+  object-fit: contain;
   width: 100%;
   height: 100%;
 }
 
 .taro-img__mode-aspectfit {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.taro-img__mode-aspectfill {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.taro-img__mode-aspectfill--width {
-  min-width: 100%;
+  object-fit: contain;
+  width: 100%;
   height: 100%;
 }
 
-.taro-img__mode-aspectfill--height {
+.taro-img__mode-aspectfill {
+  object-fit: cover;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
 }
 
 .taro-img__mode-widthfix {