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%;
}