利用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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
VUE使用axios调用后台API接口的方法
Aug 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
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
php Ajax乱码
2008/04/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
开启PHP的伪静态模式
2015/12/31 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
jQuery实现可以扩展的日历
2020/12/01 jQuery
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python读取Excel实例详解
2018/08/17 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
党员的自我评价范文
2014/01/02 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
作风年建设汇报材料
2014/08/14 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
紧急通知
2015/04/17 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server