要实现Element Plus Carousel走马灯图片的自适应，你可以使用以下代码作为参考：
```
<template>
<el
-carousel :interval="5000" arrow="always" :height="bannerHeight + 'px'" style="border: 1px solid red;">
<el
-carousel
-item v
-for="item in 4" :key="item">
<el
-row :gutter="12">
<el
-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="height:340px;margin
-bottom: 20px;">
<img ref="bannerHeight" src="../image/banner1.png" alt="" @load="imgLoad" style="width: 100%">
</el
-col>
</el
-row>
</el
-carousel
-item>
</el
-carousel>
<div id="test
-div" style="border: 5px solid red;background
-color: antiquewhite;">当前高度：{{bannerHeight}}</div>
</template>
<script>
export default {
data() {
return {
bannerHeight: 0,
};
},
methods: {
imgLoad() {
const imgElement = this.$refs.bannerHeight;
this.bannerHeight = imgElement.clientHeight;
},
},
};
</script>
```
这段代码中，我们使用`imgLoad`方法监听图片加载事件，通过`this.$refs.bannerHeight`获取图片元素的实际高度，然后将该高度赋值给`bannerHeight`变量。最后，在`el
-carousel`的`:height`属性中使用`bannerHeight`作为高度值，实现了图片的自适应效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [【最简便方法】element
-plus/element
-ui走马灯配置图片以及图片自适应](https://blog.youkuaiyun.com/m0_62742402/article/details/127837417)[target="_blank" data
-report
-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none
-task
-cask
-2~all~insert_cask~default
-1
-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max
-width: 50%"]
- *2* *3* [element
-ui走马灯实现图片自适应](https://blog.youkuaiyun.com/qq_40976321/article/details/104513316)[target="_blank" data
-report
-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none
-task
-cask
-2~all~insert_cask~default
-1
-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max
-width: 50%"]
[ .reference_list ]
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
