VueJs DropZone-如何调整预加载图像的大小以适合缩略图大小

Question

首先，我正在使用Vue DropZone上传照片。我目前在dropzone中有一个预加载的图像。我设法通过引用vueDropZone组件并调用manualAddFile（file，url）方法来实现这一点。但是，我无法调整预加载图像的大小以适合缩略图框，该缩略图框的尺寸为160 x 160 px。我尝试应用以下CSS类，但无法正常工作

.dz-image img {
  width: 100%;
  height: 100%;
}

仅给出一个清晰的图片，我将提供我的代码和一些我想要实现的屏幕截图。

    <template>
  <div>
    <vue-dropzone id="dropzone" ref="myVueDropzone" :options="dropOptions" :useCustomSlot="true">
      <div class="dropzone-custom-content">
        <i class="fas fa-cloud-upload-alt fa-3x"></i>
        <h4 class="dropzone-custom-title mb-0 mt-3">Drag & Drop</h4>
      </div>
    </vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  components: {
    vueDropzone
  },
  data() {
    return {
      /* This is similar to configuration options in dropzone.js */
      dropOptions: {
        url: "https://httpbin.org/post",
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        thumbnailWidth: 160,
        thumbnailHeight: 160
      }
    };
  },

  mounted() {
    var file = {
      // Specify the file size and type of file
      size: 160,
      type: "image/jpeg"
    };
    var url = require("../assets/child.jpeg");
    this.$refs.myVueDropzone.manuallyAddFile(file, url);
  }
};
</script>

<style>
</style>

这是预加载照片的尺寸

与用户上传的照片相比，这是预加载照片的大小。 基本上，我希望预加载的照片与用户上传的照片匹配，尺寸为160 x 160像素