【JS】图片不压缩处理，自动裁切，居中显示

在PC端项目中，我们可能会遇到这样的需求，如下图所示，图片大小与实际包裹他得盒子不是一样的宽高比，如果宽高都是100%显示会导致图片的拉伸或者压缩，很影响效果，下方代码是实现不对图片进行压缩，动态裁切图片，并且居中显示。

image.png

图片的父盒子需要固定宽高并且overflow:hidden 才能实现裁切的效果

function flexedImg(classname,maxWidth,maxHeight) {    //图片的class类名  图片父盒子宽高
        var width,height;
        console.log(maxWidth,maxHeight)
        $(classname).each(function(index,item) {
            $("").attr("src", $(item).attr("src")).load(function () { // 动态创建img对象
                width = this.width;
                height = this.height;
                if(width>height){
                        var move =  width/height*maxHeight - maxWidth
                        if(move>0){
                            move = '-'+ move/2 + 'px'
                        }else{
                            move = Math.abs(move/2) + 'px'
                        }
                        $(item).css({ height: "100%", width: "auto",marginLeft:move});
                    }else{
                        var move = height/width*maxWidth - maxHeight
                        if(move>0){
                            move = '-'+ move/2 + 'px'
                        }else{
                            move = Math.abs(move/2) + 'px'
                        }
                        $(item).css({ width: "100%", height: "auto",marginTop:move});
                    }



            })
        });
    }