`

设定网页最小最大宽度和高度（兼容IE6）

IECSSJavaScriptHTML 
阅读更多 
/* 最小寬度 */
.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")
  );
}

 

 

 

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

 

这里是结合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这两个类变量就可以很方便的修改最大的长宽.

 

分享到：
| 应聘网页设计师常见的8个面试试题和答案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics