收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3534|回复: 2

[教程] 分享图片垂直居中,图片等比例缩放的方法

[复制链接]
发表于 2011-1-15 13:08:22 | 显示全部楼层 |阅读模式


童鞋们都知道图片没办法在IE中用普通方法垂直居中,本文主要是为了解决我们大多数人平时容易遇到的这个问题,其中还附加了一段JS让图片宽高等比例调整,让至少有图片一边与边框的宽高相等。

本文介绍的方法是通过IE的font-size方法模拟实现的,网上有人精确的计算过font-size和实际宽度之间的汇率大约是0.873,在本实例中宽高为200px,那么font-size应该设置为200*0.873=175px,其他就不多墨迹了,请详看代码,你懂的。

查看DEMO

 提示:您可以先修改部分代码再运行


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <meta id="robots" content="all" />
  6. <meta name="Description" content="图片垂直居中 图片等比例缩放的方法" />
  7. <meta name="Keywords" content="图片垂直居中" />
  8. <meta id="author" content="土人老徐  http://K.css6.com" />
  9. <meta id="Copyright" content="Copyright 2010-2011 K.css6.com. All Rights Reserved" />
  10. <link href="http://style.china.alibaba.com/css/fdevlib/reset/reset.css" type="text/css" media="screen" rel="stylesheet" />
  11. <title>分享图片垂直居中,图片等比例缩放的方法 </title>
  12. <style type="text/css" media="screen" rel="stylesheet">
  13. .img_list ul li{ float:left; margin:10px; width:202px; height:202px; overflow:hidden; display:inline;}
  14. .img_list ul li a{ width:200px; height:200px; overflow:hidden; display:table-cell; *display:block; line-height:200px;  font-size:200px; *font-size:175px; text-align:center;border:1px solid #f00; vertical-align:middle; font-family:Arial;}
  15. .img_list ul li img { vertical-align:middle; vertical-align:middle;}
  16. </style>
  17. </head>

  18. <body>
  19. <div class="img_list">
  20.         <ul id="img_list">
  21.                 <li>
  22.                         <a href="#">
  23.                                 <img src="http://i00.c.aliimg.com/news/upload/5000780/2_1263433563767.jpg" alt="示例图片" />
  24.                         </a>
  25.                 </li>
  26.                 <li>
  27.                         <a href="#">
  28.                                 <img src="http://img.china.alibaba.com/news/upload/5000260/392192_1263174952956.jpg" alt="示例图片" />
  29.                         </a>
  30.                 </li>
  31.                 <li>
  32.                         <a href="#">
  33.                                 <img src="http://i00.c.aliimg.com/news/upload/profile/huodong/guanghuo/03/45_1263268910318.jpg" alt="示例图片" />
  34.                         </a>
  35.                 </li>
  36.         </ul>
  37. </div>
  38. <script type="text/javascript">
  39. /*
  40.         * auto resize image
  41.         * @param    img     img obj
  42.         * @param    w       custom width
  43.         * @param    h       custom height
  44.         */
  45.         resizeImage=function(img,w,h) {
  46.             img.removeAttribute('width');
  47.             img.removeAttribute('height');
  48.             var pic;
  49.             if(document.all) {
  50.                 var pic=new Image();
  51.                 pic.src=img.src;
  52.             } else pic=img;
  53.             //check images exist and width&height >0 and custom width >0
  54.             if(pic&&pic.width&&pic.height&&w) {
  55.                 if(!h) h=w;
  56.                 if(pic.width>w||pic.height>h) {
  57.                     var scale=pic.width/pic.height,fit=scale>=w/h;
  58.                     if(document.all) img=img.style;
  59.                     img[fit?'width':'height']=fit?w:h;
  60.                     if(document.all) img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
  61.                 }
  62.             }
  63.         };
  64.                
  65. window.onload=function(){
  66.         var images=document.getElementById('img_list').getElementsByTagName('img');
  67.         for(var i=0;i<images.length;i++){
  68.                 resizeImage(images[i],200);
  69.         }
  70.                
  71.                 };
  72. </script>
  73. </body>
  74. </html>
复制代码


如果你觉得本文介绍的图片垂直居中方法值得收藏,请附上本文的网址,谢谢。

本文出处:http://k.css6.com/?p=41

[[i] 本帖最后由 karlen 于 2011-1-15 13:11 编辑 ]
发表于 2011-1-15 17:05:59 | 显示全部楼层
不是吧
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-1-15 19:03:00 | 显示全部楼层

回复 2# radom 的帖子

请问什么不是?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-28 10:29 , Processed in 0.093516 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表