已測试兼容 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. MFC TCHAR 和CHAR相互转换

    没有定义UNICODE,所以它里面的字符串就是简单用" "就行了,创建工程的时候包含了UNICODE定义,就必须对TCHAR和char进行转换. 首先是把TCHAR转为char / ...

  2. 深度学习系列之CNN核心内容

    导读 怎么样来理解近期异常火热的深度学习网络?深度学习有什么亮点呢?答案事实上非常简答.今年十月份有幸參加了深圳高交会的中科院院士论坛.IEEE fellow汤晓欧做了一场精彩的报告,这个问题被汤大神 ...

  3. VMware vSphere服务器虚拟化实验十五 vCenter vShield Manager

    VMware vSphere服务器虚拟化实验十五 vCenter vShield Manager VMware  vShield Manager是专为 VMware vCenter Server 集成 ...

  4. python语言学习5——输入和输出

    输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字. 注意点: 字符串用的是单引号 碰到逗号输出时就会输出一个空格 输入 python提供了一个input(),可以让用户输入一个字 ...

  5. uva 1434 - YAPTCHA(数论)

    题目链接:uva 1434 - YAPTCHA 题目大意:给定n和k,求题目中给定的式子S(n). 解题思路:威尔逊定理,x为素数时有,((x−1)!+1)%x==0,所以对于本题.假设3*k+7为素 ...

  6. poj3268（最短路）

    题目连接:http://poj.org/problem?id=3268 题意:给出n个点和m条单向边,现在所有牛要到牛x那里去参加聚会,并且所有牛参加聚会后还要回来,给你牛x,除了牛x之外的牛,他们都 ...

  7. 具体解释java定时任务

    在我们编程过程中假设须要运行一些简单的定时任务,无须做复杂的控制.我们能够考虑使用JDK中的Timer定时任务来实现. 以下LZ就其原理.实例以及Timer缺陷三个方面来解析java Timer定时器 ...

  8. 什么是gulp？

    gulp初涉 1.什么是gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用 ...

  9. Tkinter隐藏窗口再让他显示出来的例子

    隐藏主要是 : withdraw()函数. 重新显示出来主要是: update()和deiconify()函数. 来源:http://www.blog.pythonlibrary.org/2012/0 ...

  10. 恩布企业 IM 安卓端 1.3，服务端 1.12 公布

    恩布企业IM的 Android 安卓开源手机client EntboostIM 公布 1.3 版本号.同一时候恩布IM服务端更新至 1.12 版本号; 安卓端主要更新内容: 添加收发手机文件功能: 登 ...