手搓图片缩略图

遇到一个需求，如列表侧展示缩略图，比如

简单手搓

   <div class="image_List" v-for="(item,index) in imgData" :key="index" @click="ImageIview(item.pic,item.filename)">
          <!--          {{item}}-->
          <div class="img_box">
            <img :src="item.pic" alt=""/>
          </div>
          <div class="img_info">
            <span>{{item.filename}}</span>
          </div>
        </div>

   .img_box{
        height: 100%;
        width: 25%;
        padding: 5px;
        overflow: hidden;
      }
      img{
        min-height: 100%;
        width: 100%;
      }
      .img_info{
        width: 75%;
        color: #FFFFFF;
        padding-left: 15px;
        span{
          font-size: 1.2rem;

        }

      }

总结：

           外层div是缩略图展示位置，内层img保证图片宽度和外层一样，高度要保证最小高度是可以占满外层div的，最后用外层的   overflow: hidden;  完成