利用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 相关文章推荐
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
浅析javascript的return语句
Dec 15 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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
3.从实例开始
2006/10/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
arguments对象
2006/11/20 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
Javascript面向对象编程
2012/03/18 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
js prototype深入理解及应用实例分析
2019/11/25 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python多线程用法实例详解
2015/01/15 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python format 格式化输出方法
2018/07/16 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python热力图实现简单方法
2021/01/29 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
大学生第一学年自我鉴定2015
2014/09/28 职场文书
面试复试通知单
2015/04/24 职场文书
首席执行官观后感
2015/06/03 职场文书