利用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 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 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中的超全局变量
2006/10/09 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
Node.js事件驱动
2015/06/18 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
js实现登录验证码
2016/12/22 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python psutil库安装教程
2018/03/19 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python实现Virginia无密钥解密
2019/03/20 Python
python之mock模块基本使用方法详解
2019/06/27 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
个人党性剖析材料
2014/02/03 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js