利用JS解决ie6不支持max-width,max-height问题的方法


Posted in Javascript onJanuary 02, 2014

今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如

  if($.browser.msie && $.browser.version == 6.0)
  {
    var maxWidth = parseInt($('.viewBigPic img').css('max-width'));
    $('.viewBigPic img').each(function(){
      if ($(this).width() > maxWidth)
        $(this).width(maxWidth);
    });
  }

不知道是什么原因,获取不到css里面的最大值,然后只能用原生的js来实现

js代码如下:

<script type='text/javascript'>
function setPhotoSize(elem, width, height) {
<!--[if IE 6]>
try{
var image=new Image();
image.src=elem.src;
if(image.width>0 && image.height>0){
var rate = (width/image.width < height/image.height)? width/image.width : height/image.height;
if(rate <= 1){
elem.width = image.width*rate;
elem.height = image.height*rate;
}
else {
elem.width = image.width;
elem.height = image.height;
}
}
}catch(e){}
<!--[endif]--> 
}
</script>

部分的html代码如下:
<div class="viewBigBox">
            <div class="viewBigPic">
            <p><img id="imgid" onload="setPhotoSize(this,730,470)" src="images/viewShow.jpg" alt=""/></p>
            </div>
           </div>

css样式如下:
.viewBigBox{ border:1px solid #e3e3e3; background-color:#ffffff; padding:1px;  margin-top:18px;}
.viewBigPic{ background-color:#f7f7f7;padding:20px 14px;}
.viewBigPic p{display:table-cell;width:730px; line-height:470px; overflow:hidden; vertical-align:middle; text-align:center; height:470px;*font-size:390px;}
//实现图片垂直居中,主要运用了font-size与height的比例
.viewBigPic p img{ vertical-align:middle; max-height:470px; max-width:730px;}
Javascript 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 #Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 #Javascript
jQuery简单实现banner图片切换
Jan 02 #Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 #Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 #Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 #Javascript
js/jQuery简单实现选项卡功能
Jan 02 #Javascript
You might like
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php递归创建目录的方法
2015/02/02 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
浅谈Python中的闭包
2015/07/08 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
会计自我鉴定
2013/11/02 职场文书
后进生转化工作制度
2014/01/17 职场文书
玲玲的画教学反思
2014/02/04 职场文书
家教广告词
2014/03/19 职场文书
银行竞聘报告范文
2014/11/06 职场文书
大雁塔英文导游词
2015/02/10 职场文书
未婚证明格式
2015/06/15 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
学习心理学心得体会
2016/01/22 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python