利用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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 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
附件名前加网站名
2008/03/23 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
python中requests模块的使用方法
2015/04/08 Python
Python使用pymysql小技巧
2017/06/04 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python实现滑雪游戏
2020/02/22 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
应征英语教师求职信
2013/11/27 职场文书
王老吉广告词
2014/03/20 职场文书
教师自我鉴定范文
2014/03/20 职场文书
信息员培训方案
2014/06/12 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python