设定网页最小最大宽度和高度（兼容IE6）
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）的更多相关文章
- IE 6最小最大宽度与高度的写法
最小最大宽度,最小最大高度,这是CSS很常见的一个要求.在现代浏览器中,一个 min-height,min-width 就可以解决问题,但是在IE系列,比如IE6则比较繁琐一点.下面总结一些IE 6下 ...
- 有两种分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0，隐藏播放器。
<bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下 <bgsound src="your.mid" ...
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
- 关于div宽度和高度的100%设定
设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...
- Div的宽度与高度的100%设定
div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...
- min-height最小高度的实现（兼容IE6、IE7、FF）（解决IE6不兼容min-height）
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- 如何通过js和jquery获取图片真实的宽度和高度
什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...
随机推荐
- Java中利用JFrame创建窗体
1. 一个简单例子: public class Test(){ public static void main(String[] args){ JFrame frame = new JFrame(); ...
- redis初识及基本操作
一.redis介绍: 1.Redis是什么: REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高性能的(Key-Value) ...
- xshell连接不上
1.排查道路通不通 ping baidu.com 是否通畅,如果不通 2.排查DNS ping 223.5.5.5 地址解释是否通畅 3.是否有劫财劫色的 检查防火墙 selinux是否 关 ...
- CopyOnWriteArrayList的增删改查实现原理
https://www.cnblogs.com/simple-focus/p/7439919.html 篇文章的目的如下: 了解一下ArrayList和CopyOnWriteArrayList的增删改 ...
- poj 1001 字符串乘法以及处理精度问题
#include<iostream> #include<cstring> using namespace std; int main() { string r; int n,d ...
- android 闹钟设置问题
Android开发中,alarmManager在5.0以上系统,启动时间设置无效的问题 做一个app,需要后台保持发送心跳包.由于锁屏后CPU休眠,导致心跳包线程被挂起,所以尝试使用alarmMana ...
- layui upload封装
<link rel="stylesheet" href="layui/css/layui.css"> <script src="js ...
- SQL事务的四种隔离级别
1未提交读(Read uncommitted):完全不锁表,所以会出现脏数据.2提交读(Read committed):1.事务1中update才锁表,可以select到最新数据. 事务2select ...
- 01-取消文件与svn服务器的关联
有的时候一个和svn服务器关联的文件,svn的链接已经失效,但是文件还是显示和svn关联的状态. 下面主要是解决怎么取消一个文件和svn服务器的关联. 1 新建一个文本文件 在任意目录下新建一个文本文 ...
- 前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js
问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要 ...