咨询热线:010-69606070
   设为首页 | 收藏本站
最新资讯:
相关链接
常用代码
您现在的位置:首页 > 新闻资讯 > 常用代码

设定网页最小最大宽度和高度(兼容IE6)

发布日期:2016-04-27 浏览次数:
本文章《设定网页最小最大宽度和高度(兼容IE6)》,由怀柔网站制作怀柔网站开发怀柔网页设计专业公司整理发布,主要介绍了怀柔网站制作怀柔网站维护怀柔网站开发怀柔网站优化等相关知识,怀柔网站建设公司服务范围,以及怀柔网页设计怀柔网站制作怀柔网站优化等的注意要点,希望对你有所帮助。

 /* 最小寬度 */

.min_width{min-width:300px;

  /* sets max-width for IE */

  _width:expression(document.body.clientWidth < 300 ? "300px" : "auto");

}

/* 最大寬度 */

.max_width{

  max-width:600px;

  /* sets max-width for IE */

  _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");

}

/* 最小高度 */

.min_height{

  min-height:200px;

  /* sets min-height for IE */

  _height:expression(this.scrollHeight < 200 ? "200px" : "auto");

}

/* 最大高度 */

.max_height{

  max-height:400px;

  /* sets max-height for IE */

  _height:expression(this.scrollHeight > 400 ? "400px" : "auto");

/* 最大最小寬度 */

.min_and_max_width{

  min-width:300px;

  max-width:600px;

  /* sets min-width & max-width for IE */

  _width: expression(

    document.body.clientWidth < 300 ? "300px" :

       ( document.body.clientWidth > 600 ? "600px" : "auto")

  );

/* 最大最小高度 */

.min_and_max_height{

  min-height:200px;

  max-height:400px;

  /* sets min-height & max-height for IE */

  _height: expression(

    this.scrollHeight < 200 ? "200px" :

      ( this.scrollHeight > 400 ? "400px" : "auto")

  );

}

 另插一条限定图片最大宽度和高度的代码,仅供参考,其实与上述同源同理。

Html代码  

这里是结合css和其支持的expression实现的,示例代码如下:  
<title>控制图片的最大高宽</title>  
  <style type="text/css">  
       .clear{clear:both;}  

.widthimg{width: expression(this.width > 200 ? '200px': true); max-width: 200px; }  
</style>    
<body>  
<div class="clear">  
<img class="widthimg" src="../image/mm.jpg" />  
</div>  
<div class="clear">  
<img src="../image/xx7.jpg" />  
</div>  
</body>  
 </html>  


 <head>  
<style type="text/css">     
<!--  
img.pic{     
max-width:300;  
max-height:100px;   
/*由于IE6.0以及以前版本的IE不支持上边两个属性,所以加上以下两条语句.这里要说明的是expression只有IE支持*/    
width: expression(this.width > 300 && this.width / 300 >= this.height / 100 ? 300 : true);    
height: expression(this.height > 100 && this.width / 300 < this.height / 100 ? 100 : true);   
}   
//-->    
</style>  
 </head>   
<body>   
<div id="pic">    
</div>   
<img class="pic" src="Blue hills.jpg" />   
</body>   
</html>  
由于上边的代码中,设置最大的长宽是直接用数字的,这样再修改的时候十分不方便,所以做了以下修改:    
<html>   
<head>  
<script type="text/javascript">  
<!--  
Object.MAX_WIDTH = 400;  
Object.MAX_HEIGHT = 300;  
-->    
</script>   
<style type="text/css">    
<!--   
img.pic{    
max-width:300px;  
max-height:100px;  
width: expression(this.width > Object.MAX_WIDTH && this.width / Object.MAX_WIDTH >= this.height / Object.MAX_HEIGHT ? Object.MAX_WIDTH : true);   
height: expression(this.height > Object.MAX_HEIGHT && this.width / Object.MAX_WIDTH < this.height / Object.MAX_HEIGHT ? Object.MAX_HEIGHT : true);  
}    
//-->   
</style>  
</head>  
<body>   
<div id="pic">    
</div>   
<img class="pic" src="Blue hills.jpg" />   
</body>  
</html>  
这样的话,只需要修改Object.MAX_WIDTH和Object.MAX_HEIGHT这两个类变量就可以很方便的修改最大的长宽.


怀柔网站建设 怀柔网页制作 怀柔网页设计 怀柔网络公司 怀柔建站公司
本站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。- 怀柔seo
Copyright Longding Website Design Technology Co.,Ltd.All Rights Reserved.Tel:010-69606070
京公网安备1101051892号 京ICP备12007991号-3  
友荐云推荐