Jquery Dropzone.js将缩略图宽度更改为100%

我使用Dropzone.js允许用户将文件上传到服务器，根据规范，您可以更改缩略图宽度，如下所示，但是我想将宽度更改为100%，而不是使用px，这可能吗

因为如果我这样做了

thumbnailWidth:100%

它将无法识别%char

    dzImageOptions = Dropzone.options.myDropzone = {
        thumbnailWidth: 314, //I want to change width to 100% instead
        thumbnailHeight: 314,
        init: function (file) {

        }
}
    //Also have to change css or thumbnail won't resize properly
    .dropzone.song-image .dz-preview .dz-image {
    border-radius: 1px;
    width: 314px;
    height: 314px;
}

<div class="dropzone song-image"></div>

dzImageOptions=Dropzone.options.myDropzone={
thumbnailWidth:314，//我想改为将宽度更改为100%
拇指指甲高度：314，
初始化：函数（文件）{
}
}
//还必须更改css或缩略图无法正确调整大小
.dropzone.song-image.dz预览.dz图像{
边界半径：1px；
宽度：314px；
高度：314px；
}

您不能在

拇指指甲宽度

和

拇指指甲高度

上指定百分比。Dropzone使用这些值创建图像源以将其显示为预览

但是您可以将缩略图保留在原始宽度和高度，将这些值设置为

null

（请注意，这可能会导致高分辨率图像出现一些延迟），然后使用

宽度和高度属性以所需的大小显示图像，并使用css调整

.dz image

容器

html:

<div class="dropzone" id="myDropzone"></div>

---

我需要用dropzone完成快速响应的缩略图，这篇文章帮了我很大的忙。我还需要在没有jquery的情况下完成这项工作，下面是我的想法。我想如果这对其他人有帮助，我会和你分享

我的dropzone init函数如下所示：

init: function () {
    this.on('thumbnail', function(file, dataUrl) {
        var thumbs = document.querySelectorAll('.dz-image');
        [].forEach.call(thumbs, function (thumb) {
            var img = thumb.querySelector('img');
            if (img) {
                img.setAttribute('width', '100%');
                img.setAttribute('height', '100%');
            }
        });
    }),
    this.on('success', function(file) {
        var thumbs = document.querySelectorAll('.dz-image');
        [].forEach.call(thumbs, function (thumb) {
            thumb.style = 'width: 100%; height: auto;';
        });
    })
}

---

我不是javascript向导，所以可能有一种更有效或更好的方法来实现这一点。请分享

在尝试了很长一段时间后，以下改变对我起了作用

HTML代码：

<form action="/" class="dropzone" method="post" id="myAwesomeDropzone">

                                </form>

---

基于@wallek876答案，我尝试了一种更简单的方法。我将直接进入相关部分：

init: function() {
    this.on("success", function(file) {
        $('.dz-image img').css({"width":"100%", "height":"auto"});
    })
}

---

我在问题中没有看到ID为“file128_dropzone”的元素。很确定这段代码不会起任何作用。。。

<form action="/" class="dropzone" method="post" id="myAwesomeDropzone">

                                </form>

            Dropzone.autoDiscover = false;

        $(document).ready(function()
        {

            debugger;

            $("form#myAwesomeDropzone").dropzone ({

                acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",

                thumbnailWidth: null,

                thumbnailHeight: null,

                init:function()
                {

                    debugger;

                    var self = this;

                    self.on("thumbnail", function(file, dataUrl)
                    {

                        debugger;

                        $('.dz-preview').css({"width":"100%", "height":"150px", "margin":"0px"});
                        $('.dz-image').css({"width":"100%", "height":"150px"});

                    }),

                    self.on("success", function(file)
                    {

                        debugger;

                        $('.dz-image').css({"width":"240px", "height":"240px"});

                    })

                }

            });

        });

init: function() {
    this.on("success", function(file) {
        $('.dz-image img').css({"width":"100%", "height":"auto"});
    })
}