fix(image): simulate object-fit behavior to compatible with IE11 and …

…other browsers which not suppor fix ElemeFE#15278
SimonaliaChen · Apr 29, 2019 · 8df59d9 · 8df59d9
1 parent a206e90
commit 8df59d9
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
@@ -11,7 +11,7 @@
       class="el-image__inner"
       :src="src"
       :alt="alt"
-      :style="{ 'object-fit': fit }">
+      :style="imageStyle">
   </div>
 </template>
 
@@ -21,6 +21,16 @@
   import { isString, isHtmlElement } from 'element-ui/src/utils/types';
   import throttle from 'throttle-debounce/throttle';
 
+  const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
+
+  const ObjectFit = {
+    NONE: 'none',
+    CONTAIN: 'contain',
+    COVER: 'cover',
+    FILL: 'fill',
+    SCALE_DOWN: 'scale-down'
+  };
+
   export default {
     name: 'ElImage',
 
@@ -38,10 +48,24 @@
       return {
         loading: true,
         error: false,
-        show: !this.lazy
+        show: !this.lazy,
+        imageWidth: 0,
+        imageHeight: 0
       };
     },
 
+    computed: {
+      imageStyle() {
+        const { fit } = this;
+        if (!this.$isServer && fit) {
+          return isSupportObjectFit()
+            ? { 'object-fit': fit }
+            : this.getImageStyle(fit);
+        }
+        return {};
+      }
+    },
+
     watch: {
       src(val) {
         this.show && this.loadImage();
@@ -72,11 +96,13 @@
         this.error = false;
 
         const img = new Image();
-        img.onload = this.handleLoad.bind(this);
+        img.onload = e => this.handleLoad(e, img);
         img.onerror = this.handleError.bind(this);
         img.src = this.src;
       },
-      handleLoad(e) {
+      handleLoad(e, img) {
+        this.imageWidth = img.width;
+        this.imageHeight = img.height;
         this.loading = false;
         this.$emit('load', e);
       },
@@ -120,6 +146,36 @@
         off(_scrollContainer, 'scroll', _lazyLoadHandler);
         this._scrollContainer = null;
         this._lazyLoadHandler = null;
+      },
+      /**
+       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
+       */
+      getImageStyle(fit) {
+        const { imageWidth, imageHeight } = this;
+        const {
+          clientWidth: containerWidth,
+          clientHeight: containerHeight
+        } = this.$el;
+
+        if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
+
+        const vertical = imageWidth / imageHeight < 1;
+
+        if (fit === ObjectFit.SCALE_DOWN) {
+          const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+          fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+        }
+
+        switch (fit) {
+          case ObjectFit.NONE:
+            return { width: 'auto', height: 'auto' };
+          case ObjectFit.CONTAIN:
+            return vertical ? { width: 'auto' } : { height: 'auto' };
+          case ObjectFit.COVER:
+            return vertical ? { height: 'auto' } : { width: 'auto' };
+          default:
+            return {};
+        }
       }
     }
   };

diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss
@@ -7,11 +7,13 @@
 }
 
 @include b(image) {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 
   @include e(inner) {
     @extend %size;
-    vertical-align: top;
   }
 
   @include e(placeholder) {