图片裁剪自适应

Posted 2020-06-08

最近真是冷，才恍然早已是冬天，冻的手都僵了。

最近项目中图片需要统一固定宽高，但后台上传的各个图片比例并不是都一样的，直接把图片设置宽高会导致图片变形。

所以需要对图片进行处理，图片直接放在容器中默认的宽度低于容器的宽度，需要把图片高度设成容器高度，然后图片水平居中显示，反之垂直居中。

话不多说直接上代码，比较简单也就不详细讲解了，写成一个通用函数了可以拿过去直接使用。

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‘;
            }
        }
    }
};

如果你觉得这篇随笔对你有帮助可以支付宝(左)或微信(右)打赏小毅喝杯咖啡 ^_^