Vue2项目中，如何解决图片全屏预览

Question

Vue2项目中，使用Element ui组件，使用轮播图时，图片设置preview-src-list属性后无法全屏显示，只能在当前父组件全屏显示，如何解决，请求赐教

<el-carousel :interval="2000" type="card" height="400px">
      <el-carousel-item v-for="(p, index) in list" :key="index">
        
        <el-image
          :src="p.pic_url"
          class="image"
          :preview-src-list="[p.pic_url]"
          style="background-position: center center"
          @click.stop="handleClickItem"
        />
      
        
      </el-carousel-item>
    </el-carousel>

Answer 1

参考一下ChatGPT的解决方案：

如果您使用Element UI的轮播组件，并在其中使用el-image组件来显示图片，同时在el-image组件上设置了preview-src-list属性来提供预览图片列表，但是您发现预览图片无法全屏显示，只能在当前父组件全屏显示，这可能是因为您没有正确设置CSS样式。

可以尝试添加以下CSS样式来解决这个问题：

.el-carousel__item .el-image__preview-wrapper {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.8);
}

.el-carousel__item .el-image__preview {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
}

这些样式将为预览图片创建一个全屏覆盖层，并将其居中显示。此外，它还将为预览图片设置最大高度和最大宽度，并将其显示为块级元素，以确保它在水平和垂直方向上都居中对齐。

您可以将这些CSS样式添加到全局样式文件中，或将其添加到当前组件的样式部分中，以覆盖默认样式。