Responsive image processing in vue

Responsive image processing in 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 ' ), 
     // Write your own path, here is my project path. 
  } 
},

css代码

/ * The parent element, the two child elements are left and right structure, the left is a picture, the right is some text content * / 
.ins -pro- con { 
  display: flex; 
} 
/ * The width of the left element is proportional The element is the parent element of the picture * / 
.ins -con- top { 
  width: 37 % ; 
} 
/ * The proportion of the width of the right element * / 
.con - foot { 
  width: 63 % ; 
} 
/ * The picture plus the following attributes can be selected from Adapt to the left area, no matter how high and wide the left image will shrink or stretch to fill all the space on the left, * / 
.con -top- image { 
  max -width: 100 % ; 
  height: 100 % ; 
}