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. Go语言基础之20--web编程框架之Gin框架

    一.Gin框架介绍 1.1 简介 A. 基于httprouter开发的web框架. http://github.com/julienschmidt/httprouter B. 提供Martini风格的 ...

  2. Go语言基础之14--Waitgroup和原子操作

    一.Waitgroup介绍 1.1 背景 package main import ( "fmt" "time" ) func main() { ch := ma ...

  3. 2048小游戏（Java）（swing实现）（二）

    这里是上一次的成果,只能用鼠标点,没法用键盘 最近扩充了一下知识面,实现了用键盘操控2048小游戏 但是还是不支持同时使用键盘和鼠标同时操作 import javax.swing.*; //impor ...

  4. getter与setter

    var obj = { get a() { return 2; }, get c() { return 34 } } Object.defineProperty( obj, 'b', { get: f ...

  5. 爬虫（GET）——爬baidu.com主页

    工具:python3 目标:www.baidu.com 工作流程: 1)反爬虫第一步:抓包工具fiddler抓取页面请求信息,得到User-Agent的值,用于重构urllib.request.Req ...

  6. HTTP的请求头标签 If-Modified-Since

    一直以来没有留意过HTTP请求头的IMS(If-Modified-Since)标签. 最近在分析Squid的access.log日志文件时,发现了一个现象.就是即使是对同一个文件进行HTTP请求,第一 ...

  7. spring和springmvc父子容器关系

    一般来说,我们在整合spring和SpringMVC这两个框架中,web.xml会这样写到: <!-- 加载spring容器 --> <!-- 初始化加载application.xm ...

  8. vue resource 携带cookie请求 vue cookie 跨域(六)

    1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...

  9. express中connect-flash中间件的使用

    在学习node的时候,flash是困扰我最久的一个中间件,之前一直都没有很好的理解,这里做一个总结. 参考自:http://yunkus.com/connect-flash-usage/ 什么是fla ...

  10. OneDrive撸5T硬盘空间教程

    注意:要注册多个账户获取网盘的,用无痕模式打开临时教育邮箱网址.打开之后不要关闭,等会用来接收验证码. 1.需要office 365注册这时候需要教育邮箱: 临时教育邮箱:http://sysu.ed ...