Dropzone.js 预览图片位置设置

Question

我有一个问题，当预览图片被拖放时，无法正确定位在dropzone内部。 我设置了一个带有蓝色边框的dropzone。 当我将一张图片拖动到其中时，其预览会出现轻微向右和向下偏移的情况。结果是我只能在顶部和左侧看到区域的蓝色边框，而预览则超出了右侧和底部线条。 我希望预览图像能够准确地出现在dropzone内，但找不到解决方法。

有任何想法吗？以下是CSS代码的摘录-有点长，因为我很难找到上述问题的原因... 提前感谢您的帮助！

.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);
}*/

- Paul

---

你能试着做一个类似于 JSFiddle 的东西吗？这样我就可以看到并尝试玩耍了。 - morgan9999

Answer 1

如果您想上传单个图像，而不更改css dropzone，则有方法可以实现您想要的内容。您可以设置图像接收区域“蓝色边框”的大小，并根据图片在“蓝色边框”区域上的比例设置大小。考虑来自dropzone.css的css填充。例如：

“蓝色边框区域”可以为=>宽度：1200px，高度：400px，然后：

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

- Eduardo Paz