已測试兼容 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. 编程之美2013 初赛一 A - 竞价 学习大牛的思路

    这题我做了N久也做不出....赛后看了大牛AC的思路.... Program: #include<iostream> #include<cmath> #include<s ...

  2. Mysql主键索引、唯一索引、普通索引、全文索引、组合索引的区别

    原文:Mysql主键索引.唯一索引.普通索引.全文索引.组合索引的区别 Mysql索引概念: 说说Mysql索引,看到一个很少比如:索引就好比一本书的目录,它会让你更快的找到内容,显然目录(索引)并不 ...

  3. oschina图形和图像工具开源软件

    图形和图像工具开源软件 http://www.oschina.net/project/tag/181/imagetools?sort=view&lang=21&os=0

  4. Java基础之数组序列化、反序列化 小发现（不知道 是不是有问题）

    结论:  数组,无论是否声明为transient,都是可以序列化.反序列化的. 测试情况如下: 1.两种类型的数组:int .String: 2 声明为transient  或者不做任何修饰:. 3. ...

  5. Cocos2d-x内存管理解说在ios开发中

    使用过 Cocos2d-x 都知道,其中有一套自己实现的内存管理机制,不同于一般 C++ 的编写常规,而在使用前,了解其原理是有必要的,网上已经有很多对内部实现详细解说的文章.而对于使用者而言,并不需 ...

  6. spring Annotation 组分注塑

    spring 注意分类 启动spring自己主动扫描功能 <context:component-scan/> 1.@Repository: 它用于将数据訪问层 (DAO 层 ) 的类标识为 ...

  7. Java中的工具类和新特性

    1:Collections集合框架工具类: /* 集合框架的工具类. Collections:集合框架的工具类.里面定义的都是静态方法. Collections和Collection有什么差别? Co ...

  8. MTK Android Driver：GPIO

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2JrODYxMTEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  9. [leetcode]3 Sum closest

    问题叙述性说明: Given an array S of n integers, find three integers in S such that the sum is closest to a ...

  10. xcode target

    A target specifies a product to build and contains the instructions for building the product from a ...