http://www.cnblogs.com/double-bin/archive/2011/12/19/2293093.html

/* 最小寬度 */

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

设定网页最小最大宽度和高度（兼容IE6）的更多相关文章

  1. IE 6最小最大宽度与高度的写法

    最小最大宽度,最小最大高度,这是CSS很常见的一个要求.在现代浏览器中,一个 min-height,min-width 就可以解决问题,但是在IE系列,比如IE6则比较繁琐一点.下面总结一些IE 6下 ...

  2. 有两种分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0，隐藏播放器。

     <bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下 <bgsound src="your.mid" ...

  3. 关于Div的宽度与高度的100%设定

    http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...

  4. 关于div宽度和高度的100%设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  5. Div的宽度与高度的100%设定

    div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...

  6. min-height最小高度的实现（兼容IE6、IE7、FF）（解决IE6不兼容min-height）

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  7. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  8. js和jquery获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...

  9. 如何通过js和jquery获取图片真实的宽度和高度

    什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...

随机推荐

  1. Linux系统lvm管理

    pv:   物理卷,被pv命令处理过的物理分区vg:物理卷组        被组装到一起的物理卷pe: 物理扩展        lvm设备的最小存储单元    lvm是pe的整数倍lvm:逻辑卷    ...

  2. 隐藏win10中“此电脑”里的6个子文件夹

    删除点击此电脑后6个子文件夹 运行regedit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Fold ...

  3. Photoshop入门教程（六）：通道

    学习心得:当大部分人听到通道.心里可能会有一种很害怕的感觉,因为“通道”并不像“图层”这样易于理解,望而生畏.”通道“的本质其实是存储图片的信息,把一张图片比作一个为网站,那么通道就是网站的后台,存储 ...

  4. 关于box-shadow、border-radius不兼容ie8的解决办法

    本来从css3兼容ie9+挺好的,可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法.之前在网上查到一些说用 PIE.htc. But 我就是按照他说的写的没有管用.请教了一下别人才会写了 ...

  5. Android文件/文件夹选择器（支持多选操作），已封装为lib库，直接添加依赖即可。

    话不多少,先上图一览: 接下来我们开始写个app测试: 1.新建Android工程:FileSelectorTest 2.更改MainActivity: 在里面写四个textview模拟button, ...

  6. Web 2.0 浏览器端可靠性测试第2部分(如何发现和分析 Web 2.0 浏览器端的内存泄漏)

    介绍浏览器端的可靠性测试 在上一编文章中我们介绍了浏览器端可靠性测试的概念.测试方法.以及常用的测试和分析工具.我们知道,浏览器端可靠性测试,就是以浏览器为测试平台,通过模拟用户在真实场景下的页面操作 ...

  7. notepad++查看Log

    安装步骤:打开notepad++,插件→ Plugin Manager→ Show Plugin Manager→ Avaliable→ 等待插件列表刷新出来后,选中Android Logger插件→ ...

  8. 关于java中char占几个字节，汉字占几个字节

    我们平常说,java中char占2个字节,可又说汉字在不通的编码格式中所占的位数是不同的,比如gbk中汉字占2个字节,utf8中多数占3个字节,少数占4个.而所有汉字在java程序中我们都可以简单的用 ...

  9. CI控制器调用内部方法并载入相应模板的做法

    当我打开链接:http://localhost/3g/index/open/a/b?from=timeline后,判断链接中的from是否等于timeline,如果等于timeline,那么就调用控制 ...

  10. 如何解决css和js的{}与smarty定界符冲突的问题

    当输入url地址后网页出现:Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error i ...