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

最新推荐文章于 2024-07-12 20:49:16 发布

vs2005_net

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量591

点赞数

分类专栏： CSS 文章标签： css xhtml javascript ie html border

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

图片自动等比例缩小，其实如果不考虑ie6的话，用css就可以实现，设定img的max-width和max-height，而<img>标签内不设定widht和height即可。 ie7已经支持max-width和max-height，这是为数不多的好消息之一。但是对于ie6及以前的版本，就只能用js来设置了。在 ff 2.0 / ie6 / ie7 / op 8.5+ / sa 3 中测试通过。不过垂直方向在 ff 和 sa 中稍微有些错位，还需解决。希望大家来测试找bug 注意：垂直居中的关键在于文档的dtd类型！！

<!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>

vs2005_net

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+css图片自动等比例缩小且垂直居中

图片自动等比例缩小，其实如果不考虑ie6的话，用css就可以实现，设定img的max-width和max-height，而标签内不设定widht和height即可。 ie7已经支持max-width和max-height，这是为数不多的好消息之一。但是对于ie6及以前的版本，就只能用js来设置了。在 ff 2.0 / ie6 / ie7 / op 8.5+ / sa 3 中测试通过。不过垂直
复制链接

扫一扫