js+css图片自动等比例缩小且垂直居中

原创 2007年10月11日 15:51:00
图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-width和max-height,而标签内不设定widht和height即可。 <br />ie7已经支持max-width和max-height,这是为数不多的好消息之一。 <br />但是对于ie6及以前的版本,就只能用js来设置了。 <br /><br />在 ff 2.0/ ie6 / ie7 中测试通过。 <br />opera 8.5 cn 垂直居中未通过,正在研究[貌似opera下如果只有图片行高会失效……]。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片自动等比例缩小且垂直居中</title>
<!--[if lte IE 6]>
<script type="text/javascript" language="javascript">
function imgFix() {
  //定义要限制的图片宽高,这个宽高要同style里面定义的相同,小于限定高宽的图片不操作
  var widthRestriction = 200;
  var heightRestriction = 200;
  var allElements = document.getElementsByTagName('*')  
  for (var i = 0; i < allElements.length; i++)
  {
    if (allElements[i].className.indexOf('imgBox') >= 0)
        {
      var imgElements = allElements[i].getElementsByTagName('img');
      for (var j=0; j < imgElements.length; j++)
          {
        if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction )
                {
          if ( imgElements[j].width > imgElements[j].height)
                  {
            imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width);
            imgElements[j].width = widthRestriction;
          } else
                  {
            imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height);
            imgElements[j].height = heightRestriction;
          }
        }
                if ( imgElements[j].height < heightRestriction )
                {
                  imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px";
                }
      } /*for j*/
    }
  }/*for i*/
}
window.onload = imgFix;
</script>
<![endif]-->
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.imgBox li {
list-style:none;
width:200px;  /* 宽度 */
height:200px; /* 高度 */
background:#ccc;
border:1px solid #666;
text-align:center;
margin:5px;
line-height:200px;
}
.imgBox img {
max-width:200px;  /* 宽度 */
max-height:200px; /* 高度 */
vertical-align:middle;
}
-->
</style>
</head>

<body>
<ul class="imgBox">
  <li><img src="http://www.ddcat.net/tebie/coco/img/coco_20070618_03.jpg" alt="img" /></li>
  <li><img src="http://www.ddcat.net/tebie/coco/img/coco_20070618_04.jpg" alt="img" /></li>
  <li><img src="http://www.ddcat.net/bbs2007/images/style_1/zh-cn/redirect_logo.gif" alt="img" /></li>
  <li><img src="http://www.ddcat.net/blog/templates/ddcat2007/img/logo.gif" alt="img" /></li>
</ul>
</body>
</html>
 

js+css图片自动等比例缩小且垂直居中[v20071208]

对class="imgBox"的元素内的图片自动等比例缩小,本例放在ul中,利用li可以让图片有边框和背景色 图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max...
  • txqqnet
  • txqqnet
  • 2013-04-13 11:03:50
  • 402

js+css图片自动等比例缩小且垂直居中[v20071208]

对class="imgBox"的元素内的图片自动等比例缩小,本例放在ul中,利用li可以让图片有边框和背景色图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-wid...
  • ddcatlee
  • ddcatlee
  • 2007-07-09 13:08:00
  • 1326

js图片等比例缩小 图动态等比例缩小

  • 2011年05月14日 15:42
  • 1KB
  • 下载

css img 等比例自动缩放

img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 按父容器宽度自动缩放,并且保持图片原本的长宽比...
  • Forrest_Chen
  • Forrest_Chen
  • 2016-08-15 12:30:56
  • 28247

C#中上传图片按比例自动缩小或放大

          /**////         /// 按比例缩小图片,自动计算宽度    ///         /// 源图文件名(包括路径)        /// 缩小后保存为文件名(包括路...
  • cj_kris
  • cj_kris
  • 2008-01-02 15:38:00
  • 4161

php上传图片等比例缩小图片

  • 2009年12月25日 12:38
  • 638B
  • 下载

js让图片自动按比例缩小代码

//缩放图片到合适大小 function ResizeImages() {    var myimg,oldwidth,oldheight;    var maxwidth=550;    ...
  • zczzsq
  • zczzsq
  • 2012-11-01 17:42:01
  • 1235

java中对图片按比例缩放

需要对图片进行处理,使之能够适当的显示在画面中。找到一些资料后,处理也比较简单代码:  public static Icon getFixedBoundIcon(String filePath, in...
  • virtualjxc
  • virtualjxc
  • 2009-02-17 17:23:00
  • 3406

两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧

两种方式各有各的优势和短板: 一:也是大家最经常用的,如下:         这种方式优势在于: 1,可以结合flexble等手机适配框架实现手机端的适配  (width: 4.0rem;) ...
  • wangle_style
  • wangle_style
  • 2017-12-05 11:35:44
  • 272

css实现图片等比例缩小不变形

当图片未知大小时,为了使图片在一个规定大小的div中全部显示,可以对图片使用max-width和max-height,这样图片就会按照对大的宽或高等比例缩放图片,图片相对不变形清晰。...
  • Inuyasha1121
  • Inuyasha1121
  • 2016-09-23 17:03:06
  • 2065
收藏助手
不良信息举报
您举报文章:js+css图片自动等比例缩小且垂直居中
举报原因:
原因补充:

(最多只允许输入30个字)