浏览代码

优化图片区域被压缩的问题

陈淑洋 5 年之前
父节点
当前提交
41738b32c2
共有 2 个文件被更改,包括 5 次插入4 次删除
  1. 1 1
      src/views/myHistoryTest/myHistoryTest.html
  2. 4 3
      src/views/myHistoryTest/myHistoryTest.scss

+ 1 - 1
src/views/myHistoryTest/myHistoryTest.html

@@ -31,7 +31,7 @@
     <div class="item" v-for="(item,index) in dataList" :key="item.created"
       :class="[ (isCopy && index == 0) ? itemCopyClass :'', item.isMore ? morehoverClass : '' ]">
       <!-- <img  mode="" :src="" alt=""> -->
-      <el-image class="item-img" :src="item.coverImg" fit="cover">
+      <el-image class="item-img1" :src="item.coverImg" fit="cover">
         <div slot="error" class="outline">
           <img class="item-img-outline" src="../../assets/images/picture-error.png" alt="">
           <!-- <i class="el-icon-picture-outline"></i> -->

+ 4 - 3
src/views/myHistoryTest/myHistoryTest.scss

@@ -63,7 +63,7 @@
   .item {
     position: relative;
     width: 220px;
-    height: 270px;
+    height: 330px;
     background: #FFFFFF;
     box-shadow: 0 5px 11px 0 rgba(78,93,255,0.14);
     border-radius: 6px;
@@ -134,9 +134,10 @@
         background-size: cover;
       }
     }
-    .item-img {
+    .item-img1 {
       width: 100%;
-      height:156px;
+      min-height:141px;
+      max-height: 141px;
       border-radius:6px 6px 0px 0px;
       object-fit: cover;
       display: flex;