已測试兼容 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. 调试Release发布版程序的Crash错误

    http://www.cppblog.com/Walker/archive/2012/11/08/146153.html http://blog.sina.com.cn/s/blog_48f93b53 ...

  2. [IDEs]Eclipse自动格式化代码

    格式化代码快捷键:Ctrl + Shift + F 一般情况: 1).Ctrl + A 2).Ctrl + Shift + F ps: 格式化之后发现代码换行了,因为已经达到最大长度,可修改设置,增加 ...

  3. [Android学习笔记]使用ListView

    简单使用ListView 关键在于Adatper Adatper用来连接UI与数据源.Adapter既负责提供数据,又负责创建Item视图. 一般步骤: 1.创建list_item.xml,用来创建L ...

  4. firebug使用

    查看网页的header是优化web应用的关键一环,从header中,可以检查到非常 多的信息:网页在squid中的缓存时间(age).客户端缓存时间(expires).是否有最后修改时间(last-m ...

  5. Windbg的gflags.exe -- Attach调试利器

    有没有碰到过程序启动就因为异常直接crash?有没有碰到程序启动之后什么反应也没有?有没有碰到过程序启动之后去触发另一个进程失败?有没有碰到别人的程序调用了你的代码,出现问题以后,让你来调查,而你只有 ...

  6. android中设置TextView/Button 走马灯效果

    在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml ...

  7. Oracle Enterprise Manager Cloud Control 12c R4 安装配置

    准备软件 em12.1.0.4_linux64_V45344-01.zip em12.1.0.4_linux64_V45345-01.zip em12.1.0.4_linux64_V45346-01. ...

  8. Unity3D游戏开发之开发游戏带来的问题

    昨日曾就某投资人把移动团队失败原因之中的一个归于选择Unity引擎进行了一番评论,工具本身无罪,但怎样理解工具.正确使用Unity引擎确实须要讨论,在选择Unity之前你也许须要了解下这个引擎实际开发 ...

  9. GNU C的使用

    基本语法 gcc [options] [filenames]  说明:  在gcc后面可以有多个编译选项,同时进行多个编译操作.很多 的gcc选项包括一个以上的字符.因此你必须为每个选项指定各 自 ...

  10. 分享毕业学生“ERP实施project联赛”总结，是肺腑之言——知识是人的价值的体现，每门课程是有意义的学校纪律

    丁.这是我刚刚完成的实习报告,特别是给你一个.阿信,让你知道的真实想法研究生管,我希望你相信在教育管帮助.---雷管1102 刘弈福 以上是刚刚收到(20140427)生邮件,贻富不是我带的毕业设计学 ...