利用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获取变量
Aug 24 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
js对象的复制继承实例
Jan 10 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 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
php可生成缩略图的文件上传类实例
2014/12/17 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
php测试kafka项目示例
2020/02/06 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python中暂存上传图片的方法
2015/02/18 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Python银行系统实战源码
2019/10/25 Python
python反转列表的三种方式解析
2019/11/08 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
公司JAVA开发面试题
2015/04/02 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Python 如何实现文件自动去重
2021/06/02 Python