利用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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
JavaScript 事件参考手册
Dec 24 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
详解如何在Angular优雅编写HTTP请求
Dec 05 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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python 动态调用函数实例解析
2019/10/21 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
工作保证书
2015/01/17 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android