文档章节

兼容各浏览器的css设置最大宽度和高度

silencewen
 silencewen
发布于 2014/06/11 15:32
字数 142
阅读 21
收藏 0
<script type="text/javascript"> 
Object.MAX_WIDTH = 300; 
Object.MAX_HEIGHT = 130; 
</script>

<style type="text/css"> 
   #pic{ 
    max-width:300px; 
    max-height:130px; 
    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>

上面方法测试可用,还有两种方法未测试

方法一
.resize img { width: expression(this.width > 680 ? 680 : true); max-width: 680px; height: expression(this.height > 500 ? 500 : true); max-height:680px;}

方法二
.resize img {max-width: 680px;max-height: 680px;} /* for Firefox & IE7 */
* html .resize img { /* for IE6 */
width: expression(this.width > 680 && this.width > this.height ? 680 : true);
height: expression(this.height > 500 ? 500 : true);
}


本文转载自:http://wah199.blog.163.com/blog/static/20323811020127265145953/

共有 人打赏支持
silencewen
粉丝 0
博文 38
码字总数 5077
作品 0
广州
程序员
私信 提问
min-width最小宽度与max-width最大宽度

一、实际应用说明 最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表,对象里图片大小不定时候,为了不想让他太小不统一这个时候我们可以...

乱世中的单纯
2016/01/18
45
0
css判断不同分辨率显示不同宽度布局实现自适应宽度

1、DIVCSS小案例描述 我们首先设置一个DIV盒子CSS命名为“.abc”,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。 我 们通过手动拖...

梦梦阁
2015/08/03
0
0
响应式设计之媒体查询

今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个...

独孤蝈蝈
2016/10/25
19
0
转载 div+css浏览器兼容实例二:css hack的理解

上周给大家转载了《Div+css浏览器兼容实例分析(一)》,今天继续给大家转载《div+css浏览器兼容实例二:css hack的理解》。 先来说一下什么是css hack ,写了这么久的div+css代码,我还真不...

oecp
2011/06/07
0
0
IE6终极备忘:修复IE6下 25+ Bugs

作者: xcntime 发表于 2010-08-11 10:49 原文链接 阅读: 0 评论: 0 [译]IE6终极备忘:修复IE6下 25+ Bugs 2010年01月08日 | HTML/CSS, JavaScript 去年就想将IE的bug系统地整理下,但一直都忙...

xcntime
2010/08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript面试题大坑之隐式类型转换实例代码

1.1-隐式转换介绍 在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算 这种无需程序员手...

peakedness丶
8分钟前
0
0
示例vue 的keep-alive缓存功能的实现

本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 #Vue 实现组件信息的缓存 当...

前端攻城老湿
10分钟前
0
0
解析Vue.js中的computed工作原理

我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批...

前端攻城小牛
11分钟前
0
0
linux脚本中父shell与子shell 执行的几种方式

本文主要介绍以下几个命令的区别: shell subshell source $ (commond) `commond` Linux执行Scripts有两种方式,主要区别在于是否建立subshell 1. source filename or . filename 不创建sub...

问题终结者
29分钟前
1
0
安装jdk和Tomcat

12月12日任务 16.1 Tomcat介绍 16.2 安装jdk 16.3 安装Tomcat Tomcat介绍 Tomcat是apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由apache、Sun和其他一些...

robertt15
30分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部