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图片自动等比例缩小且垂直居中

对class="imgBox"的元素内的图片自动等比例缩小,本例放在ul中,利用li可以让图片有边框和背景色 图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-w...
  • zch681990
  • zch681990
  • 2013年11月28日 09:45
  • 891

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

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

实现任意图片垂直居中的三种方法

在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2014年11月03日 14:25
  • 9192

js控制图片缩放、水平和垂直方向居中对齐

js控制图片缩放、水平和垂直方向居中对齐
  • Goluck98
  • Goluck98
  • 2014年08月08日 23:47
  • 1558

实现div里的img图片水平垂直居中

body结构 方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align...
  • DreamFJ
  • DreamFJ
  • 2017年03月31日 09:53
  • 32824

图片大小自适应垂直居中的方法

偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式: Javascript篇 ...
  • cddcj
  • cddcj
  • 2016年09月08日 15:21
  • 2453

Html5新特性 canvas画板画直线和等比缩放居中裁剪图片

介绍一下canvas的几种使用方法,画直线和裁剪图片;包含以下两个方面: 1、canvas裁剪图片:h5的这个新特性,我们可以使用canvas进行图片的处理,比如裁剪,等比放大或缩小。比如我们有个...
  • fengshizty
  • fengshizty
  • 2014年05月14日 12:52
  • 4564

【CSS】单行图片与文字垂直居中

单行图片与文字垂直居中核心关键,是在img标签中的style属性加入vertical-align:middle;样式 如果不设置的话,单行图片与文字并排的话,文字默认是底部居中的。 注意如下的代码的...
  • yongh701
  • yongh701
  • 2015年09月16日 10:41
  • 12409

如何让图片按比例响应式缩放、并自动裁剪的css技巧

如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是...
  • oulihong123
  • oulihong123
  • 2017年01月18日 14:39
  • 10554

图片垂直水平居中的N种方法

div内容水平垂直居中解决方案
  • playboyanta123
  • playboyanta123
  • 2014年10月08日 21:35
  • 3137
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js+css图片自动等比例缩小且垂直居中
举报原因:
原因补充:

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