Merge branch '2.x' of https://github.com/myl0204/taro into myl0204-2.x

NervJS · Jul 31, 2020 · cabde71 · cabde71
1 parent 57fafed
commit cabde71
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 27 deletions.
diff --git 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
@@ -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 {