Dropzone缩略图宽度图像大小 [英] Dropzone thumbnail width image size

问题描述

如何更改上传图片的缩略图尺寸？我在我的javascript中尝试过thumbnailWidth：350，但这不会增加缩略图大小，而是缩略图只是放大了。如何操作图像缩略图大小？

How do I change the thumbnail size of uploaded images? I have tried thumbnailWidth:"350" in my javascript, However that does not increase the thumbnail size, rather the thumbnail just looks zoomed in on. How do I go about manipulating the image thumbnail size?

HTML：

<section id="create">
<form action="upload.php" class="dropzone" id="uploadphoto"></form>
</section>

CSS：

.dropzone {
position: relative;
border: 10px dotted #FFF;
border-radius: 20px;
color: white;
font: bold 24px/200px arial;
height: 400px;
margin: 100px auto;
text-align: center;
width: 400px;
}

.dropzone:hover {
border: 10px dotted #0C3;

.dropzone.dropped {
background: #222;
border: 10px dotted #444;
}

.dropzone.in {
width: 600px;
height: 200px;
line-height: 200px;
font-size: larger;
}

.dropzone img {
border-radius: 10px;
vertical-align: middle;
max-width: 95%;
max-height: 95%;
}

Javascript：

Javascript:

Dropzone.options.uploadphoto = {
maxFilesize: 25, //MB
dictDefaultMessage: "Drag and Drop Posters    or click",
acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF,.pdf,.pub",
thumbnailWidth:"350",
accept: function(file, done) {
    console.log("uploaded"); //debuging the upload
    done();
},
init: function() {
 this.on("addedfile", function() {
  if (this.files[1]!=null){
    this.removeFile(this.files[0]);
       }
    });
  }
};

推荐答案

使用您在中使用的相同值覆盖CSS配置选项

Override the CSS with the same values you use in the configuration options

.dropzone .dz-preview .dz-image {
  width: 250px;
  height: 250px;
}


Dropzone.options.myAwesomeDropzone = {
  ....
  thumbnailWidth: 250,
  thumbnailHeight: 250,
  ....
}

参见 JS小提琴这里

这篇关于Dropzone缩略图宽度图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！