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. Autel MaxiSYS Pro Diagnostic System

    The Autel Maxisys Pro Diagnostic System is a complete OEM-level diagnostic system that enables the s ...

  2. STL之vector(不定长数组)

    vector就是一个不定长数组,另外它把一些常用操作“封装”在了vector类型内部.例如,若a是一个vector,可以用a.size()读取它的大小,a.resize()改变大小,a.push_ba ...

  3. Error in event handler for "el.form.change": "TypeError: value.getTime is not a function"

    首先说一下我使用的实际场景 html代码: js代码: 首先说明出现原因,elementUI的日期选择器[el-date-picker]在加上格式 value-format="yyyy-MM ...

  4. oracle merge into与sqlserver merge into 比较

    merge into: 在两个表之间,根据与源表联接的结果,对目标表执行插入.更新或删除操作. Oracle在9i引入了merge into命令,SQL Server 2008也引入merge int ...

  5. python_文件 处理

    一.字符编码 内存固定使用unicode编码 数据最先产生于内存中,是unicode格式,要想传输需要转成bytes格式 # unicode -------> enconde( u t f - ...

  6. 20181031 temp

    https://wiki.jenkins.io/display/JENKINS/M2+Release+Plugin https://issues.jenkins-ci.org/browse/JENKI ...

  7. 配置matcaffe 遇到的两个坑

    1. 问题 (1) Invalid MEX-file '/root/caffe/matlab/+caffe/private/caffe_.mexa64': /matlab/r2016a/bin/gln ...

  8. Windows 10家庭版升级到专业版,系统蓝屏

    Log Name: SystemSource: Microsoft-Windows-DistributedCOMDate: 9/9/2018 7:56:57 PMEvent ID: 10016Task ...

  9. MATLAB循环和函数定义,调用

    格式不要括号,最后有end for 循环变量 = 表达式1:表 2:表 3 表1:初值     表2:步长      表3:终值 求圆周率:π/4=1 - 1/3 + 1/5 -1/7+...+(-1 ...

  10. ubuntu14.04通过 gvm 安装 go语言开发环境

    最近用回了ubuntu ,所以打算安装golang学习当下比较火热的这个语言 本来打算使用 sudo apt-get install golang的 安装后发现 是1.2.1不是最新版 所以上网上搜了 ...