已測试兼容 IE6,IE7,IE8，火狐FF，谷歌chrome。

这里使用了jquery插件，假设你不使用jquery，略微改造一下也非常快。

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

[html] view
plaincopy

  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. <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
  7. <script type="text/javascript">
  8. // i@huanglixiang.com
  9. function setImgMiddle(img) {
  10. var $img = $(img),
  11. $panel = $(img).parent();//图片容器
  12. var img_width = $img.width(),img_height = $img.height(),//图片宽高
  13. panel_width = $panel.width(), panel_height = $panel.height(); //图片容器宽高
  14. if(panel_width/panel_height < img_width/img_height){
  15. $img.width(panel_width);
  16. $img.css('margin-top', (panel_height - $img.height()) * 0.5);
  17. }else{
  18. $img.height(panel_height);
  19. $img.css('margin-left', (panel_width - $img.width()) * 0.5);
  20. }
  21. $img.fadeIn(100);
  22. }
  23. $(function(){
  24. //  这样的写法在ie6,7,8都不是非常正常，有时会随机丢失load事件
  25. $('#part2 img').load(function(){
  26. setImgMiddle(this);
  27. //console.log($(this).attr('src'));
  28. })
  29. })
  30. </script>
  31. <style>
  32. .c{clear:both;}
  33. li {
  34. background-color: #F5F5F5;
  35. border: 1px solid #CCCCCC;
  36. margin: 5px;
  37. overflow: hidden;
  38. width: 240px;
  39. padding:1px 1px 1px 1px;
  40. height: 240px;
  41. float:left;
  42. }
  43. li img{display:none;}
  44. </style>
  45. </head>
  46. <body>
  47. <ul id="part1">
  48. <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" onload="setImgMiddle(this);"></li>
  49. <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" onload="setImgMiddle(this);"></li>
  50. <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg" onload="setImgMiddle(this);"></li>
  51. </ul>
  52. <div class="c"></div>
  53. <ul id="part2">
  54. <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" ></li>
  55. <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" ></li>
  56. <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg"></li>
  57. </ul>
  58. </body>
  59. </html>

js控制图片缩放、水平和垂直方向居中对齐的更多相关文章

  1. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

  2. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  3. Android RecyclerViewSwipeDismiss：水平、垂直方向的拖曳删除item

     Android RecyclerViewSwipeDismiss:水平.垂直方向的拖曳删除item RecyclerViewSwipeDismiss是一种支持RecyclerView的水平.垂直 ...

  4. 使图片相对于上层DIV始终水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 如何让图片相对于上层DIV始终保持水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  7. JS控制SVG缩放+鼠标控制事件

    话不多说,直接上代码吧,不行你砍我... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. js控制图片自动缩放，实现铺满盒子，不变形，完全局中

    此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...

  9. ios 利用size classes 使 iPad  水平和垂直方向布局不同

    我们知道ipad全屏幕显示时,无论水平放置还是竖直放置,width 和 height 都是 regular,不像iphone能够区别,那么就不能使用size class 布局不同的水平和垂直界面了吗? ...

随机推荐

  1. 14.4.3.4 Configuring InnoDB Buffer Pool Prefetching (Read-Ahead) 配置InnoDB Buffer pool 预读

    14.4.3.4 Configuring InnoDB Buffer Pool Prefetching (Read-Ahead) 配置InnoDB Buffer pool 预读 一个预读请求 是一个I ...

  2. 通过Type.InvokeMethod实现方法的重载

    版本:.NET Framework 3.5 先来一个反射调用方法的例子: using System; using System.Reflection; class Example { static v ...

  3. [置顶] Bug 11775332 - cluvfy fails with PRVF-5636 with DNS response timeout error [ID 11775332.8]

    Bug 11775332  cluvfy fails with PRVF-5636 withDNS response timeout error but error text is not clear ...

  4. WM_SYSCOMMAND消息命令整理 good

    注意:1. 使用WM_SYSCOMMAND时,鼠标的一些消息可能会受到影响,比如不能响应MouseUp事件,可以在窗口中捕获WM_SYSCOMMAND消息,并判断消息的CommandType来判断消息 ...

  5. ACM-计算几何之Quoit Design——hdu1007 zoj2107

    Quoit Design Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  6. 专注UI——有用技术：模糊搜索

    在如今的项目中.须要做模糊搜索,在曾经技术的基础上非常快得完毕了第一版.大家先看看第一版的效果,我们一会做评论: 0基础: 我们可能部分源代码(附件中会有所有源代码) <span style=& ...

  7. Ajenti 1.0 发布，服务器管理系统 - 开源中国社区

    Ajenti 1.0 发布,服务器管理系统 - 开源中国社区 Ajenti 1.0 发布,服务器管理系统

  8. 【ThinkingInC++】52、函数内部的静态变量

    /** * 书本:[ThinkingInC++] * 功能:函数内部的静态变量 * 时间:2014年9月17日18:06:33 * 作者:cutter_point */ #include " ...

  9. iPhone、iPad强制关机

    情景:iPad測试应用过程中死机了. 解决:同一时候按住右上方的电源键和屏幕下方的HOME键大约10秒左右. 就会自己主动强制断电关机,然后重新启动. 强制重新启动后你会看到进入苹果的标志,然后进入主 ...

  10. Java学习之道：空指针错误求解救？？？？？？？？？？？？

    运行下面这个主方法红色代码的地方就报如下错: https://api.weibo.com/2/users/show.json?access_token=2.00szM9cCc4R_EC6ebcf150 ...