Element-ui配合Vue实现走马灯图片自适应效果

最新推荐文章于 2024-07-06 19:22:44 发布

起风了吹散了

最新推荐文章于 2024-07-06 19:22:44 发布

阅读量6.9k

点赞数 6

本文链接：https://blog.csdn.net/weixin_45531741/article/details/109575568

版权

本文介绍了如何使用Element-ui和Vue创建一个走马灯图片组件，确保图片在不同屏幕尺寸下等比缩放，保持不挤压和不失真。通过监听窗口resize事件，动态调整图片高度以适应视口变化。详细步骤包括初次加载时获取图片高度并渲染，以及通过addEventListener监听视口变化，实时更新图片高度。

摘要由CSDN通过智能技术生成

elementUI配合Vue实现走马灯图片自适应效果（等比缩放，使得图片缩小不挤压，放大不拉伸变形）
解决方法的原理：监听屏幕视口大小如果’resize’,发生改变了，就获取图片的高度height，然后渲染到页面

ElementUI 地址： https://element.eleme.io/#/zh-CN/component/carousel

在这里插入图片描述

方法解析：

1.窗口第一次打开的时候加载执行 imgLoad()方法，第一次加载时获取图片在窗口中的高度，然后渲染到页面中去。

2.接着通过addEventListenner（）方法监听视口是否发生改变，如果发生改变，重新调用imgLoad()方法渲染数据到页面,这样图片高度就可以随视口改变发生改变，适应各种大小屏幕。

在这里插入图片描述

效果展示：

小屏幕状态：
在这里插入图片描述

全屏状态：

在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">
    <!-- 引入ElementUI  CDN -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>ElementUI 走马灯自适应</title>
</head>
<style type="text/css">  
</style>
 
<body<

最低0.47元/天解锁文章

起风了吹散了

关注

6
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
Element-ui配合Vue实现走马灯图片自适应效果

elementUI走马灯实现图片自适应（等比缩放，使得图片缩小不挤压，放大不拉伸变形）解决方法的原理：监听屏幕视口大小如果’resize’,发生改变了，就获取图片的高度height，然后渲染到页面ElementUI 地址： https://element.eleme.io/#/zh-CN/component/carousel方法解析：1.窗口第一次打开的时候加载执行 imgLoad()方法，第一次加载时获取图片在窗口中的高度，然后渲染到页面中去。2.接着通过addEventListenner（）
复制链接

扫一扫