Javascript Dropzone缩略图宽度图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28031705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropzone thumbnail width image size
提问by Crisp
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?
如何更改上传图片的缩略图大小？我在我的 javascript 中尝试过 thumbWidth:"350" ，但是这不会增加缩略图大小，而缩略图只是看起来放大了。如何操作图像缩略图大小？
HTML:
HTML：
<section id="create">
<form action="upload.php" class="dropzone" id="uploadphoto"></form>
</section>
CSS:
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]);
}
});
}
};
回答by dangel
Override the CSS with the same values you use in the configuration options
使用您在配置选项中使用的相同值覆盖 CSS
.dropzone .dz-preview .dz-image {
width: 250px;
height: 250px;
}
Dropzone.options.myAwesomeDropzone = {
....
thumbnailWidth: 250,
thumbnailHeight: 250,
....
}
See the JS Fiddle here
回答by Konstantin XFlash Stratigenas
use css zoom
使用 css 缩放
.dropzone {
zoom: 0.4;
}
