fix image preview

packages/image-preview/src/image-preview.vue

@@ -1,11 +1,9 @@
 <template>
   <transition name="image-fade">
     <div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
-      <zan-swipe :show-indicators="false">
+      <zan-swipe>
         <zan-swipe-item v-for="item in images">
-          <img class="zan-image-preview__image" :src="item" alt="" :class="{
-            'zan-image-preview__image--center': true
-          }">
+          <img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
         </zan-swipe-item>
       </zan-swipe>
     </div>
@@ -53,6 +51,22 @@ export default {
       this.value = false;
     },
 
+    handleLoad(event) {
+      const containerSize = this.$refs.previewContainer.getBoundingClientRect();
+      const ratio = containerSize.width / containerSize.height;
+      const target = event.currentTarget;
+      const targetRatio = target.width / target.height;
+
+      const centerClass = 'zan-image-preview__image--center';
+      const bigClass = 'zan-image-preview__image--big';
+
+      if (targetRatio > ratio) {
+        target.className += (' ' + centerClass);
+      } else {
+        target.className += (' ' + bigClass);
+      }
+    },
+
     close() {
       if (this.closing) return;
 

packages/zanui-css/src/image_preview.css

@@ -11,25 +11,26 @@
 
     @e image {
       display: block;
-      width: 100%;
-      height: auto;
-      transition: .2s ease-out;
       position: absolute;
       left: 0;
 
       @m center {
+        width: 100%;
+        height: auto;
         top: 50%;
         transform: translate3d(0, -50%, 0);
       }
     }
 
-    .zan-swipe {
+    .zan-image-preview__image--big {
       height: 100%;
-      overflow: visible;
+      width: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
     }
 
-    .zan-swipe__items {
-      overflow: visible;
+    .zan-swipe {
+      height: 100%;
     }
   }
 }