标签：
最近真是冷，才恍然早已是冬天，冻的手都僵了。
最近项目中图片需要统一固定宽高，但后台上传的各个图片比例并不是都一样的，直接把图片设置宽高会导致图片变形。
所以需要对图片进行处理，图片直接放在容器中默认的宽度低于容器的宽度，需要把图片高度设成容器高度，然后图片水平居中显示，反之垂直居中。
话不多说直接上代码，比较简单也就不详细讲解了，写成一个通用函数了可以拿过去直接使用。
function resizeImg(imgClassName,imgWidth,imgHeight){ var imgs = document.getElementsByClassName(imgClassName); var i=0,img,parentDiv,newWidth,minusPx; for(;i < imgs.length;i++){ img = imgs[i]; img.style.position = ‘absolute‘; parentDiv = img.parentNode; parentDiv.style.width = imgWidth + ‘px‘; parentDiv.style.height = imgHeight + ‘px‘; parentDiv.style.position = ‘relative‘; parentDiv.style.overflow = ‘hidden‘; if(img.height / img.width < imgHeight/imgWidth){ newWidth = imgHeight/img.height*img.width; minusPx = (newWidth - imgWidth)/2; img.style.width = newWidth + ‘px‘; img.style.height = imgHeight + ‘px‘; img.style.clip = ‘rect(0,‘ + (newWidth - minusPx) + ‘px,‘ + imgHeight + ‘px,‘+minusPx+‘px)‘; img.style.marginLeft = ‘-‘+ minusPx + ‘px‘; }else if(img.height / img.width > imgHeight/imgWidth){ minusPx = (img.height - imgHeight)/2; img.style.clip = ‘rect(‘+ minusPx +‘px,‘ + imgWidth + ‘px,‘ + (img.height - minusPx) + ‘px,0)‘; img.style.marginTop = ‘-‘+ minusPx + ‘px‘; } } } };
如果你觉得这篇随笔对你有帮助可以支付宝(左)或微信(右)打赏小毅喝杯咖啡 ^_^
标签：
原文地址：http://www.cnblogs.com/songsony/p/5156074.html
