vue+elementUI框架实现走马灯图片高度自适应

weixin_45115895

于 2020-09-25 11:54:02 发布

阅读量2.2k

点赞数

文章标签： vue.js javascript es6 css3

本文链接：https://blog.youkuaiyun.com/weixin_45115895/article/details/108792741

版权

vue+elementUI框架实现走马灯图片高度自适应

element UI自身的carousel组件容器的高度是固定写死的，就算把image图片的宽度设置100%，它会随着浏览器屏幕的宽度等比例缩小到设置的最小宽度,但是因为外面的容器已经写死了一个高度(150px)，这样随着浏览器宽度变小,底部的话就会留有一片空白区域,如下,正常的高度应该有红线区域那么高
在这里插入图片描述
网上搜索了一些方法,基本思路都是监听浏览器窗口大小然后给carousel组件容器的高度赋值

总结了一下,应用到我自己的案例里面,亲测有效

<!-- tempate部分 -->
<el-carousel trigger="click" :height="imgHeight">
  <el-carousel-item v-for="(item,index) in bannerList" :key="index">
    <img ref=