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

http://www.itjxue.com  2015-08-06 23:23  来源:未知  点击次数: 

原文连接:http://www.ddcat.net/blog/archives/2007/10/188.html

  图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-width和max-height,而<img>标签内不设定widht和height即可。 

  ie7已经支持max-width和max-height,这是为数不多的好消息之一。 但是对于ie6及以前的版本,就只能用js来设置了。 

  在 ff 2.0/ ie6 / ie7 中测试通过。 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="......" alt="img" /></li> 
  <li><img src="......" alt="img" /></li> 
  <li><img src="......" alt="img" /></li> 
  <li><img src="......" alt="img" /></li> 
</ul> 
</body> 
</html>

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章