Css Dropzone.js预览图像定位
我有一个问题,当预览图像被放置在dropzones中时,如何将它们放置在dropzones中。 我设置了一个带蓝色边框的dropzone。 当我在其中拖动一个图像时,它的预览会稍微向右和向下移动。因此,我只在顶部和左侧看到区域的蓝色边框,预览覆盖了右侧和底部线条。 我希望预览图像完全进入dropzone,但无法找到正确的方法 有什么想法吗?下面是CSS代码的摘录-有点长,因为我很难找到问题所在。。。 提前感谢您的帮助Css Dropzone.js预览图像定位,css,dropzone.js,Css,Dropzone.js,我有一个问题,当预览图像被放置在dropzones中时,如何将它们放置在dropzones中。 我设置了一个带蓝色边框的dropzone。 当我在其中拖动一个图像时,它的预览会稍微向右和向下移动。因此,我只在顶部和左侧看到区域的蓝色边框,预览覆盖了右侧和底部线条。 我希望预览图像完全进入dropzone,但无法找到正确的方法 有什么想法吗?下面是CSS代码的摘录-有点长,因为我很难找到问题所在。。。 提前感谢您的帮助 .dropzone { position: relative; /* b
.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);
}*/
如果你想上传一张图片,而不改变css dropzone,有很多方法可以实现你想要的。您可以设置图像接收区域“蓝色边框”的大小,并设置与图像覆盖区域成比例的大小“蓝边”。从DROPZON.CSS EX:考虑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
你能试着做一个类似JSFIDLE的东西吗?这样我就可以看到并试着玩了