已測试兼容 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. 虚拟机centOS中安装Redis,主机Redis Destop Manager不能访问虚拟机Redis server的解决方案

    今天在学些redis的时候碰到个问题,发现主机Redis Destop Manager不能访问虚拟机Redis server的解决方案,找了一些网上的资料,原因可能有两个,整理记录下来: 1. Red ...

  2. iOS学习——iOS国际化（十二）

    开发的移动应用更希望获取更多用户,走向世界,这就需要应用国际化,国际化其实就是多语言.这篇文章介绍Xcode4.5以后的国际化,包括应用名国际化和应用内容国际化.如果是Xcode4.5之前版本请参考. ...

  3. 关于hibernate中多对多关系

    关于多对多关系 数据库:在使用多对多的关系时,我们能够使用复合主键.也能够不使用,直接引入外键相同能够实现. 在数据库中使用多对多关系时,须要一个中间表. 多对多关系中的数据库结构例如以下: 表:Or ...

  4. 黑马程序员：Java基础总结----类加载器

    黑马程序员:Java基础总结 类加载器   ASP.Net+Android+IO开发 . .Net培训 .期待与您交流! 类加载器 Java虚拟机中可以安装多个类加载器,系统默认三个主要类加载器,每个 ...

  5. 【Cocos2d-X开发学习笔记】第01期：PC开发环境的详细搭建

    本文使用的是cocos2d-x-2.1.4版本 ,截至目前为止是最新稳定版 所谓的开发环境就是制作游戏的地方,打个比方读者就会十分清楚了.比如提到做饭,人们都会想到厨房.这是 因为厨房有炉灶.烟机.水 ...

  6. jquery实现鼠标拖动

    <html>   <head>   <script type='text/javascript' src='js/jquery-1.5.1.js'></scr ...

  7. Shell脚本检查memcache进程并自己主动重新启动

    修正版: #!/bin/sh #check memcache process and restart if down mm_bin="/usr/local/bin/memcached&quo ...

  8. 2014 CSDN博文大赛终于获奖名单发布

    博文大赛第二阶段(2014年7月15日-2014年8月10日)已经结束,决赛获奖名单已在8月11日出炉. 现将获奖名单发布: 移动开发 NO.1    罗升阳    Luoshengyang    S ...

  9. hdu4487（概率dp）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4487 题意:开始位置在0,每一步可以向右向左或者不动,问走了n步后,路径中能到达最右的期望. 分析:d ...

  10. oracle varchar2 和varchar 区别

    今天,往ORACLE一个表的VACHAR2(20)字段中插入七个汉字,提示错误:插入的值太大. 改成插入六个汉字,又可以. 一直以来,都以为一个汉字占两个字节.觉得非常奇怪. 用length().le ...