vue3中使用elmentplus中的el-image预览图片的布局如何调整

在使用Element Plus中的el-image组件预览图片时，可以通过调整父容器的样式来实现布局调整。

首先，需要将el-image组件包裹在一个父容器中，例如一个div元素。然后，可以通过设置该div元素的width和height属性来调整预览图片的大小。同时，还可以通过设置该div元素的position和top属性来调整预览图片的位置。

例如，下面代码中的div元素设置了宽度和高度为300px，并且通过position和top属性将预览图片放在了父容器的中间位置：

<template>
  <div class="preview-image-container">
    <el-image
      class="preview-image"
      v-if="imageUrl"
      :src="imageUrl"
      fit="contain"
      :preview-src-list="[imageUrl]"
    ></el-image>
  </div>
</template>

<style>
.preview-image-container {
  width: 300px;
  height: 300px;
  position: relative;
}

.preview-image {
  width: 100%;
  height: 100%;
}

.preview-image-container .el-image__preview-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

需要注意的是，上面代码中的`.el-image__preview-wrapper`是el-image组件内部的一个元素，通过设置其position和top属性来实现预览图片的垂直居中。