Dropzone.js preview image positioning

问题:

I have an issue for positioning the preview images inside the dropzones when they are dropped. I have set a dropzone, with a blue border. When I drag an image in it, its preview appears slightly shifted to the right and the bottom. As a result I see the blue border of the zone only on the top and the left, and the preview goes over the right and bottom lines. I would like the preview image come exactly inside the dropzone but cannot find the way to make it right.

Any idea? Here is an extract of the CSS code below - a bit long as I have troubles finding out where is the problem mentioned... Thanks in advance for your help!

.dropzone {
  position: relative;
/*  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  padding: 1em;*/
}

/* *****CHAMP CADRE BLANC***** */
.dropzone .dz-preview,
.dropzone-previews .dz-preview {
  background: rgba(255,255,255,0.8);
  position: relative;
  display: inline-block;
  margin: 0px;
  vertical-align: top;
  border: none;
  padding: 0px 0px 0px 0px;
}


/* *****CHAMP CADRE BLANC***** */
.dropzone .dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details {
  width: 70px; /*******/
  height: 70px; /*******/
  position: relative;
  background: #ebebeb;
  padding: 0px;
  margin-bottom: 0px;
}
.dropzone .dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename {
  overflow: hidden;
  height: 100%;
}

/* *****CHAMP IMAGE UPLOADEE***** */
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px; /*******/
  height: 70px; /*******/
  -webkit-border-radius: 3px;
  border-radius: 3px;
}


/* *****CHAMP CHECKMARK***** */
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
  display: none;
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 30px;
  text-align: center;
  right: -39px; /*******/
  top: 32px; /*******/
}

.dropzone .dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress {
  position: absolute;
  top: 10px;
  left: 6px;
  right: 6px;
  height: 6px;
  background: #d7d7d7;
  display: none;
}
.dropzone .dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background-color: #8cc657;
}

.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
  display: none;
  position: absolute;
  top: -5px;
  left: -20px;
  background: rgba(245,245,245,0.8);
  padding: 8px 10px;
  color: #800;
  min-width: 140px;
  max-width: 500px;
  z-index: 500;
}


/* *****CHAMP DROPZONE***** */
.dropzone {
  border: 1px solid #256EB8;
  /*min-height: 360px;*/
  height:70px;
  width:70px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  /*background: blue;*/
  background-image: url("MY_IMAGE.png");
  padding: 0px;
  margin:0px;
}

/* *****CHAMP DROPZONE MESSAGE ACCUEIL***** */
.dropzone .dz-default.dz-message {
  opacity: 1;
  background-image: url("../images/spritemap.png");


  /*background-repeat: no-repeat;
  background-position: 0 0;*/
  position: absolute;
  width: 70px; /*******/
  height: 70px; /*******/
  /*margin-left: -214px;
  margin-top: -61.5px;
  top: 50%;
  left: 50%;*/
}
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
  .dropzone .dz-default.dz-message {

    background-image: url("MY_IMAGE.png");
    -webkit-background-size: 428px 406px;
    -moz-background-size: 428px 406px;
    background-size: 428px 406px;
  }
}

/*.dropzone .dz-preview,
.dropzone-previews .dz-preview {
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
}*/

回答1:

If you want to upload a single image, without change the css dropzone, there are ways to do what you want. You can set the size of the image reception area "blue border" and set a size proportional to the image over the area of ​​"blue border" . Consider css padding from dropzone.css Ex:

The "blue border area" can be => width : 1200px and the height : 400px, then :

myDropzone = new Dropzone('#dropzone-form',
{
    url : 'upload_usuario.php?id_usuario='+id_usuario,
    addRemoveLinks : true,
    dictRemoveFile : 'delete',
    maxFiles : 1, //just send one file 
    thumbnailWidth: 1140,//the "size of image" width at px
    thumbnailHeight: 380,//the "size of image" height at px
    dictDefaultMessage: 'Some text here as the ratio of the image to upload Ex: 1140 x 380',
    init: function()
    {
       this.on("maxfilesexceeded", function(file)
       {
          this.removeAllFiles();
          this.addFile(file);
        });

      //more code here.. bla bla