commit

 <template>
   <div class="article-item-slide">
     <Slide :data="data.blockList" :threshold="0.2" :auto-play="false" :loop="false" :options="scrollOption" @change="onChange">
-      <SlideItem v-for="(item, inx) in data.blockList" :key="inx">
-        <ImageFormat :lazy="lazy" class="image-slide-item" :style="getStyle(item)" :src="item.contentData" :width="item.width" :height="item.height"></ImageFormat>
+      <SlideItem :style="slideItemStyle" v-for="(item, inx) in data.blockList" :key="inx">
+        <ImageFormat :mode="1" :lazy="lazy" :style="getImageStyle(item)" class="image-slide-item" :src="item.contentData" :width="item.width" :height="item.height"></ImageFormat>
       </SlideItem>
       <template slot="dots" slot-scope="props">
         <span class="slide-dot"
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import {first} from 'lodash';
 import {Slide} from 'cube-ui';
 import {mapState} from 'vuex';
 
@@ -45,17 +46,50 @@ export default {
     };
   },
   computed: {
-    ...mapState(['yoho'])
+    ...mapState(['yoho']),
+    slideItemStyle() {
+      const {width, height} = this.firstBlockSize;
+
+      if (width && height) {
+        return {
+          width: `${width}px`,
+          height: `${height}px`,
+          display: 'flex',
+          'justify-content': 'center',
+          'align-items': 'center'
+        };
+      }
+    },
+    firstBlockSize() {
+      const {width, height} = first(this.data.blockList) || {};
+
+      if (width && height) {
+        const scale = width / height;
+
+        return {
+          width: this.yoho.window.clientWidth,
+          height: this.yoho.window.clientWidth / scale,
+        };
+      }
+      return {};
+    }
   },
   methods: {
-    getStyle(block) {
-      const rate = +block.width / +block.height;
-      const height = this.yoho.window.clientWidth / rate;
-
-      return {
-        width: `${this.yoho.window.clientWidth}px`,
-        height: `${height}px`
-      };
+    getImageStyle({width, height}) {
+      const {height: fHeight} = this.firstBlockSize;
+      const scale = width / height;
+
+      if (scale > 1) {
+        return {
+          width: `${this.yoho.window.clientWidth}px`,
+          height: `${this.yoho.window.clientWidth / scale}px`
+        };
+      } else if (scale < 1) {
+        return {
+          width: `${fHeight * scale}px`,
+          height: `${fHeight}px`
+        };
+      }
     },
     onChange(inx) {
       this.currentIndex = inx + 1;
@@ -132,7 +166,6 @@ export default {
 }
 
 .image-slide-item {
-  width: 750px;
   overflow: hidden;
 }
 

@@ -15,29 +15,37 @@ export default {
 
     state.articleList.forEach((item, index) => {
       const imageBlocks = get(item, 'blockList', []).filter(block => block.templateKey === 'image');
-      let {width, height} = getArticleImageSize(first(imageBlocks) || {});
+      const firstImage = first(imageBlocks);
 
-      if (width && height) {
-        const scale = width / height;
+      if (firstImage) {
+        let {width, height} = getArticleImageSize(firstImage);
 
-        imageBlocks.forEach(block => {
-          let mogr2 = '?imageMogr2/thumbnail/';
+        firstImage.width = width;
+        firstImage.height = height;
+      }
+      
 
-          if (block.width / block.height > scale) {
-            mogr2 += `x${height}`;
-          } else {
-            mogr2 += `${width}x`;
-          }
-          mogr2 += `/gravity/Center/crop/${width}x${height}`;
-          block.width = width;
-          block.height = height;
-          const image = (block.contentData || '').split('?')[0];
+      // if (width && height) {
+      //   const scale = width / height;
 
-          if (image) {
-            block.contentData = `${image}${mogr2}`;
-          }
-        });
-      }
+      //   imageBlocks.forEach(block => {
+      //     let mogr2 = '?imageMogr2/thumbnail/';
+
+      //     if (block.width / block.height > scale) {
+      //       mogr2 += `x${height}`;
+      //     } else {
+      //       mogr2 += `${width}x`;
+      //     }
+      //     mogr2 += `/gravity/Center/crop/${width}x${height}`;
+      //     block.width = width;
+      //     block.height = height;
+      //     const image = (block.contentData || '').split('?')[0];
+
+      //     if (image) {
+      //       block.contentData = `${image}${mogr2}`;
+      //     }
+      //   });
+      // }
       item.index = index;
     });
     data.forEach(item => {