使用ElementUI的el-image标签的preview-src-list预览图片,图片非常小是怎么回事?

用ElementUI做一个传图片的系统。在浏览图片时用了el-image组件,并设置了preview-src-list属性预览大图。代码如下:
<el-image :src="file.thumbWebUrl" @click="onImgClick" v-for="file in files" :key="file.id" lazy :preview-src-list="urlList">
各个变量都没有问题。
但图片很小。不是应该充满屏幕的么?

img


<template>
  <div id="app-content">
    <div>
        <el-image :src="file.thumbWebUrl" @click="onImgClick" v-for="file in files" :key="file.id" lazy :preview-src-list="urlList"></el-image>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
        files: [],
        urlList: []
    }
  }
</script>

我调试着看了看,el-image-viewer__canvas很窄。

img

这是什么原因?我看网上都很简单,直接用都正常,我这里出现了这种情况?这就是一个独立的组件,难道是外部什么因素导致的?

修改css的宽度为100%试试

你项目咋那么窄啊?手机端,怎么做的适配不会是写死的px把?你看看 el那边的是不是像素值是不是px为单位,其它地方是rem为单位?如果是这样你需要配置一下把el那边px转rem....