img圖片鋪滿父元素

引入多張尺寸不同的圖片如果設置尺寸會導致圖片變形

<div class="template_image">
       <img :src="$store.state.fileUploadUrl+item.thumb" alt="" />
</div>

.template_image{
        width: 100%;
        height: 170px;
        position:relative;
        overflow: hidden;
    }
    .template_image img{
        width: 100%;
        height: 170px;
        object-fit:cover;
    }

 2. 不固定圖片寬高，按照比例顯示

　　npm install vue-proportion-directive --save

　　import proportion from 'vue-proportion-directive'

　　Vue.use(proportion)

<div v-proportion="0.5">
        比例0.5
</div>

<div class="template_image"  v-proportion="0.5625" :style="{'backgroundImage': `url(${$store.state.fileUploadUrl+item.cover})`}"></div>
.template_image {
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center center;
  }

or

<div class="template_image">
    <img v-proportion="0.75" :src="$store.state.fileUploadUrl+item.image" alt="" />
 </div>
.template_image img{
    object-fit: cover;
}