利用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 相关文章推荐
event.X和event.clientX的区别分析
Oct 06 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
node使用Koa2搭建web项目的方法
Oct 17 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 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遍历目录方法小结
2015/03/10 PHP
PHP单例模式详细介绍
2015/07/01 PHP
php判断当前操作系统类型
2015/10/28 PHP
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
详解vue-resource promise兼容性问题
2017/06/20 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
浅谈Koa服务限流方法实践
2017/10/23 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python调用私有属性的方法总结
2020/07/24 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
医学生职业生涯规划书范文
2014/03/13 职场文书
《分一分》教学反思
2014/04/13 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Django框架之路由用法
2022/06/10 Python