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

最新推荐文章于 2020-07-09 18:52:13 发布

weixin_33736649

最新推荐文章于 2020-07-09 18:52:13 发布

阅读量99

点赞数

文章标签： javascript ViewUI

已測试兼容 IE6,IE7,IE8，火狐FF，谷歌chrome。
这里使用了jquery插件，假设你不使用jquery，略微改造一下也非常快。

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

[html]view plaincopy 
     
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>demo图片自居中，宽度高度自己主动缩放</title>  
   
 <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>  
 <script type="text/javascript">  
     // i@huanglixiang.com  
     function setImgMiddle(img) {  
         var $img = $(img),  
             $panel = $(img).parent();//图片容器  
   
         var img_width = $img.width(),img_height = $img.height(),//图片宽高  
             panel_width = $panel.width(), panel_height = $panel.height(); //图片容器宽高  
   
         if(panel_width/panel_height < img_width/img_height){  
             $img.width(panel_width);  
             $img.css('margin-top', (panel_height - $img.height()) * 0.5);  
         }else{  
             $img.height(panel_height);  
             $img.css('margin-left', (panel_width - $img.width()) * 0.5);  
         }  
         $img.fadeIn(100);  
     }  
     $(function(){  
         //  这样的写法在ie6,7,8都不是非常正常，有时会随机丢失load事件  
         $('#part2 img').load(function(){  
             setImgMiddle(this);  
             //console.log($(this).attr('src'));  
         })  
     })  
   
   
 </script>  
   
 <style>  
 .c{clear:both;}  
 li {  
     background-color: #F5F5F5;  
     border: 1px solid #CCCCCC;  
     margin: 5px;  
     overflow: hidden;  
     width: 240px;  
     padding:1px 1px 1px 1px;  
     height: 240px;  
     float:left;  
 }  
 li img{display:none;}  
 </style>  
 </head>  
 <body>  
     <ul id="part1">  
         <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" onload="setImgMiddle(this);"></li>  
         <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" onload="setImgMiddle(this);"></li>  
         <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg" onload="setImgMiddle(this);"></li>  
     </ul>  
     <div class="c"></div>  
     <ul id="part2">  
         <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" ></li>  
         <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" ></li>  
         <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg"></li>  
     </ul>  
 </body>  
 </html>  

weixin_33736649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制图片缩放、水平和垂直方向居中对齐

已測试兼容 IE6,IE7,IE8，火狐FF，谷歌chrome。这里使用了jquery插件，假设你不使用jquery，略微改造一下也非常快。网上查了些资料，用css控制兼容性不好，看去非常揪心。于是找js代码，看了几种写法总是感觉差点什么，算了，还是自己写吧，于是有了以下这个简单的方法，能自己主动依据图片容器大小进行缩放、水平和垂直居中对齐，效果例如以下图：...
复制链接

扫一扫