Dropzone.js預覽圖像定位

我有一個問題，當它們被放置時將預覽圖像放置在下拉框內。我設置了一個帶藍色邊框的dropzone。當我在其中拖動圖像時，其預覽會稍微向右和向下移動。因此，我只在頂部和左側看到該區域的藍色邊框，並且預覽會覆蓋右側和底部線條。我希望預覽圖像完全進入dropzone，但無法找到正確的方法。Dropzone.js預覽圖像定位

任何想法？這裏是下面的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); 
}*/

來源

2014-09-10 Paul

你可以嘗試做一些像的jsfiddle？所以我可以看到並嘗試玩耍 – ariestikto 2015-01-27 02:31:38

如果你想上傳一個圖片，而不需要改變css的dropzone，有辦法做你想做的。您可以設置圖像接收區域的大小「藍色邊框」，並在「藍色邊框」區域設置與圖像大小成比例的大小。從dropzone.css防爆考慮CSS填充：

「藍邊境地區」可以=>寬度：1200像素，高度：400像素，則：

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

來源

2016-05-17 04:07:26

Dropzone.js預覽圖像定位

回答

相關問題