最近发现了一个比较好用的图片上传插件，Dropify.js，具体使用方法挺简单的，这里就不介绍了。

但是因为我希望图片样式宽度固定，适应性强，所以这个插件好像不能适应高度，只能在固定区域显示图片，很不舒服。

看了一下插件的源代码，发现预览图片的时候可以调整图片的高度。需要修改css和js，粘贴下面的代码。

！-插件容器-div class=' blog-title-img clear '输入类型=' file ' class=' drop ify ' data-max-file-size-preview=' 3m ' data-allowed-file-extensions=' jpegpng gif BMP '/div css可以写在自己的CSS文件中：

/*这是图片的容器*/。title-img { width :660 px；margin:40px自动0；}/*以下样式需要修改*/。drop ify-wrapper . drop ify-preview { padding :0！重要；}.dropify包装。drop ify-预览。drop ify-render img { width :100%；height:auto-web kit-transform : none；transform:nonetop:0}.drop ify-wrapper { border :0；背景-color : # f7f 8 F9；划水：0！重要；}以下是js需要修改的部分。打开源文件，找到Dropify . prototype . set review方法

drop ify . prototype . set review=function(preview able，src){ this . wrapper . remove class(' has-error ')。add CLaSS(' has-preview ')；this.filenameWrapper.children('。dropify-filename-inner ')。html(this . file . name)；var render=this . preview . children('。drop ify-render’)；this . HideLoader()；如果(previewable===true) {//保存包装，wrapper.width()是我自己在css中设置的固定宽度，我设置了660px var wrapper=this.wrapper//第一次上传时，得到图片的真实宽度和高度，按比例计算图片的高度：var height=(wrapper . width()/this . file . width)* this . file . height；//如果初始化时使用默认图片，则file.height不存在，所以需要获取真实的宽度和高度if(！Height){ //创建一个新图像，并将图像路径分配给新图像var I=new image()，src=comm . getroot()src；i.src=src//需要等待图片加载后才能得到准确的宽度和高度。$(一)。load(function(){ //的计算方法同上。高度=(包装。width()/I . width)* I . height；包装高度；});} else { wrapper.height(高度)；} var imgTag=$('img /')。attr('src '，src)；if(this . settings . height){ imgtag . CSS(' max-height '，this . settings . height)；} imgtag . appendto(render)；} else { $('i /')。attr('class '，' dropify-font-file ')。appendo(render)；$(' span class=' drop ify-extension '/')。html(this.getFileType())。appendo(render)；} this . preview . fadein()；};变换完成后，无论上传还是默认图片，宽度都可以固定，适应性强。改造完成后的效果：

转换完成

转换完成

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。