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