vue中響應式圖片處理

vue中響應式圖片處理

<div class="ins-pro-con">
  <div class="ins-con-top">
      <el-image :src="conTop" class="con-top-image"></el-image>
  </div>
  <div class="con-foot">
    <div class="policy-title">1234rtfdswebv</div>
  </div>
</div>

data () {
  return {
    conTop: require('../assets/images/calculationImage.png'), 
    //路徑寫自己的，此處為我項目路徑。
  }
},

css代碼

/* 父級元素，是的兩個子級元素為左右結構，左邊為一張圖片，右邊為一些文字內容 */
.ins-pro-con{
  display: flex;
}
/* 左邊元素寬度占比，此元素為圖片的父級元素 */
.ins-con-top{
  width: 37%;
}
/* 右邊元素寬度占比 */
.con-foot {
  width: 63%;
}
/* 圖片加如下屬性可以自適應左側區域，不管左側多高多寬圖片會縮小或拉伸來填充左邊所有空間， */
.con-top-image {
  min-width: 100%;
  height: 100%;
}