图片大小自适应垂直居中的方法

最新推荐文章于 2022-09-26 17:44:38 发布

有水有房子

最新推荐文章于 2022-09-26 17:44:38 发布

阅读量428

点赞数

本文链接：https://blog.csdn.net/jgftyfc/article/details/86649056

版权

偶尔会有这样的需求：在不知道图片宽和高情况下，需要让图片水平和垂直居中在某个容器下，而且，如果图片宽或者高超出容器，需要按照比例进行缩放，下面介绍几个常见的方式：

Javascript篇

用JS的方式处理解决图片，思路就是预加载图片，然后取宽和高，计算位置，设置margin值，达到目的

 
         //计算图片居中位置的信息 
        
         function 
         getImgSize(img,maxWidth,maxHeight){ 
        
         var 
         ratio, 
        
         picW    = img.width, 
        
         picH    = img.height, 
        
         wRatio  = maxWidth / picW, 
        
         hRatio  = maxHeight / picH; 
        
         if 
         (wRatio < 1 || hRatio < 1){ 
        
         ratio   = Math.min(wRatio, hRatio); 
        
         picW    = parseInt(picW * ratio); 
        
         picH    = parseInt(picH * ratio); 
        
         } 
        
         sPaddingTop = (maxHeight - picH)/2; 
        
         return 
         { 
        
         width : picW, 
        
         height : picH, 
        
         left : (maxWidth - picW)/2, 
        
         top : (maxHeight - picH)/2 
        
         } 
        
         } 
        
         //预加载图片 
        
         function 
         loadImg(url){ 
        
         var 
         img = document.createElement( 
         "img" 
         ); 
        
         img.onload =  
         function 
         (){ 
        
         //调用计算方式 
        
         getImageSize(img,容器宽度,容器高度); 
        
         //塞进页面 
        
         } 
        
         img.src = url; 
        
         }