Vue使用Element-ui走马灯功能动态改变图片和容器大小

要实现Vue使用Element-ui走马灯功能动态改变图片和容器大小，可以按照以下步骤进行：

1. 在Vue中引入Element-ui的Carousel组件，并在template中使用。

2. 在data中定义图片列表和容器大小。

3. 在mounted生命周期中获取容器的宽度，以便动态调整图片大小。

4. 在methods中定义一个函数，用于动态改变容器大小。

5. 在template中使用v-bind指令将容器大小绑定到Carousel组件上，并使用v-for指令循环渲染图片。

下面是示例代码：

<template>
  <el-carousel :height="containerHeight">
    <el-carousel-item v-for="(item, index) in imgList" :key="index">
      <img :src="item.src" :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { src: 'https://xxx.com/1.jpg' },
        { src: 'https://xxx.com/2.jpg' },
        { src: 'https://xxx.com/3.jpg' },
      ],
      containerWidth: 0,
      containerHeight: 300, // 初始化高度，可根据需求设置
      imgWidth: 0,
      imgHeight: 0,
    }
  },
  mounted() {
    this.containerWidth = this.$el.clientWidth
    this.setImgSize()
    window.addEventListener('resize', this.setImgSize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setImgSize)
  },
  methods: {
    setImgSize() {
      this.containerWidth = this.$el.clientWidth
      this.imgWidth = this.containerWidth
      this.imgHeight = this.containerHeight
    },
  },
}
</script>

在上面的代码中，我们使用了v-bind指令将容器高度绑定到Carousel组件上，并使用v-for指令循环渲染了图片。在mounted生命周期中，我们获取了容器的宽度，并在setImgSize函数中动态调整了图片的大小。同时，我们还添加了一个resize事件监听器，以便在窗口大小改变时重新计算图片大小。