利用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利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
bootstrap table实例详解
Jan 06 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python rsa 加密解密
2017/03/20 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
大客户销售经理职责
2013/12/04 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
安全隐患整改报告
2014/11/06 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python