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{ 37%; } /* 右边元素宽度占比 */ .con-foot { 63%; } /* 图片加如下属性可以自适应左侧区域,不管左侧多高多宽图片会缩小或拉伸来填充左边所有空间, */ .con-top-image { min- 100%; height: 100%; }