el-carousel的走马灯实现高度自适应 elementui

719 阅读1分钟

欢迎大家进群,一起探讨学习

微信公众号,每天给大家提供技术干货

博主技术平台地址

博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star

element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小 没有空隙

在这里插入图片描述 窗口第一次打开,加载了imgLoad()方法,第一次获取图片在视口中的高度,然后渲染到页面 接下来通过addEventListenner()方法监听视口是否发生改变,如果发生改变,重新调用imgLoad()方法渲染数据到页面,这样图片高度就可以随视口改变发生改变,适应各种大小屏幕。在这里插入图片描述 为了使大家看的清楚,把代码贴上

在这里插入图片描述 在这里插入图片描述

最后成功的效果图:不管屏幕多大,多小,都没有空隙。

视口最小的时候效果 在这里插入图片描述

视口最大的时候效果 在这里插入图片描述 原文地址