利用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 相关文章推荐
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
layui使用及简单的三级联动实现教程
Dec 01 Javascript
JS如何实现在弹出窗口中加载页面
Dec 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
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
支持移动端原生js轮播图
2017/02/16 Javascript
Vuex简单入门
2017/04/19 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
医院护士的求职信
2014/01/03 职场文书
护士毕业生自荐信
2014/02/07 职场文书
手机被没收检讨书
2014/02/22 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
国贸专业求职信
2014/06/28 职场文书
校庆团日活动总结
2014/08/28 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书