Vue中elementUI轮播图图片高度自适应
问题轮播图是我们经常使用到的一个组件,element官方文档中也叫“跑马灯” el-carousel。官方示例中并没有使用图片来演示,而是用来一个150px的颜色块。将h3换成img标签即可实现轮播图片,但是如果固定高度,那么如果缩小浏览器窗口,或者使用移动设备来打开,那么固定高度就会显得非常别扭。所以必须检测浏览器宽度,来动态改变轮播图组件的宽度,即响应式。解决在csdn查了一下,找到了解决办法
·
问题
轮播图是我们经常使用到的一个组件,element官方文档中也叫“跑马灯” el-carousel。官方示例中并没有使用图片来演示,而是用来一个150px的颜色块。将h3换成img标签即可实现轮播图片,但是如果固定高度,那么如果缩小浏览器窗口,或者使用移动设备来打开,那么固定高度就会显得非常别扭。所以必须检测浏览器宽度,来动态改变轮播图组件的宽度,即响应式。
解决
在csdn查了一下,找到了解决办法。
el-carousel组件高度绑定data中的数据:
<el-carousel :height="bannerHeight+'px'" type="card">
<el-carousel-item v-for="item in urlList" :key="item.id">
<img :src="item.url" alt="暂无图片">
</el-carousel-item>
</el-carousel>
然后在mouted钩子函数中,检测浏览器宽度,如果改变,则相应的改变轮播图组件宽度,达到自适应的目的。
mounted () {
// 首次加载时,初始化高度
this.screenWidth = window.innerWidth
this.bannerHeight = 600 / 1550 * this.screenWidth
// 窗口大小发生改变
window.onresize = () => {
this.screenWidth = window.innerWidth
this.bannerHeight = 600 / 1550 * this.screenWidth
}
}
轮播图片css设置:这里图片高度没有设置auto而是应该和父组件el-carousel高度一直,所以是inherit。
效果:
PC端默认宽度
移动端
原理
轮播图组件高度绑定为data中的数据。
mounted函数中检测浏览器宽度,动态改变data中的bannerHeight,从而实现改变轮播图组件的宽度。
更多推荐
已为社区贡献18条内容
所有评论(0)