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

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>

您无法在thumbnailWidth和thumbnailHeight上指定百分比. Dropzone使用这些值创建图像源以将其显示为预览.

但是您可以将缩略图保留为原始宽度和高度,将这些值设置为空(请注意,这可能会导致高分辨率图像出现滞后),然后使用< img> width和height属性,用于显示所需大小的图像,并使用css调整.dz-image容器.

HTML：

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

JS：

Dropzone.autoDiscover = false;

Dropzone.options.myDropzone = {
    url: "yourUrl",thumbnailWidth: null,thumbnailHeight: null,init: function() {
        this.on("thumbnail",function(file,dataUrl) {
            $('.dz-image').last().find('img').attr({width: '100%',height: '100%'});
        }),this.on("success",function(filE) {
            $('.dz-image').css({"width":"100%","height":"auto"});
        })
    }
};

var myDropzone = new Dropzone('div#myDropzone');