首页 > 代码库 > js控制图片缩放、水平和垂直方向居中对齐

js控制图片缩放、水平和垂直方向居中对齐

2024-07-16 13:58:23   229人阅读

已测试兼容 IE6,IE7,IE8，火狐FF，谷歌chrome。
这里使用了jquery插件，如果你不使用jquery，稍微改造一下也很快。


网上查了些资料，用css控制兼容性不好，看去很揪心。于是找js代码，看了几种写法总是感觉差点什么，算了，还是自己写吧，于是有了下面这个简单的方法，能自动根据图片容器大小进行缩放、水平和垂直居中对齐，效果如下图：

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>demo图片自居中，宽度高度自动缩放</title>  
  6.   
  7. <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>  
  8. <script type="text/javascript">  
  9.     // i@huanglixiang.com  
  10.     function setImgMiddle(img) {  
  11.         var $img = $(img),  
  12.             $panel = $(img).parent();//图片容器  
  13.   
  14.         var img_width = $img.width(),img_height = $img.height(),//图片宽高  
  15.             panel_width = $panel.width(), panel_height = $panel.height(); //图片容器宽高  
  16.   
  17.         if(panel_width/panel_height < img_width/img_height){  
  18.             $img.width(panel_width);  
  19.             $img.css(‘margin-top‘, (panel_height - $img.height()) * 0.5);  
  20.         }else{  
  21.             $img.height(panel_height);  
  22.             $img.css(‘margin-left‘, (panel_width - $img.width()) * 0.5);  
  23.         }  
  24.         $img.fadeIn(100);  
  25.     }  
  26.     $(function(){  
  27.         //  这种写法在ie6,7,8都不是很正常，有时会随机丢失load事件  
  28.         $(‘#part2 img‘).load(function(){  
  29.             setImgMiddle(this);  
  30.             //console.log($(this).attr(‘src‘));  
  31.         })  
  32.     })  
  33.   
  34.   
  35. </script>  
  36.   
  37. <style>  
  38. .c{clear:both;}  
  39. li {  
  40.     background-color: #F5F5F5;  
  41.     border: 1px solid #CCCCCC;  
  42.     margin: 5px;  
  43.     overflow: hidden;  
  44.     width: 240px;  
  45.     padding:1px 1px 1px 1px;  
  46.     height: 240px;  
  47.     float:left;  
  48. }  
  49. li img{display:none;}  
  50. </style>  
  51. </head>  
  52. <body>  
  53.     <ul id="part1">  
  54.         <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" onload="setImgMiddle(this);"></li>  
  55.         <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" onload="setImgMiddle(this);"></li>  
  56.         <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg" onload="setImgMiddle(this);"></li>  
  57.     </ul>  
  58.     <div class="c"></div>  
  59.     <ul id="part2">  
  60.         <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" ></li>  
  61.         <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" ></li>  
  62.         <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg"></li>  
  63.     </ul>  
  64. </body>  
  65. </html>  


联系
我们