您的位置：首页 > 其它

图片裁剪自适应

2016-01-24 21:53 295 查看
最近真是冷，才恍然早已是冬天，冻的手都僵了。

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

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

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

functionresizeImg(imgClassName,imgWidth,imgHeight){
varimgs=document.getElementsByClassName(imgClassName);
vari=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';
}elseif(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';
}
}
}
};

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








                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航