利用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实现背景图片切换效果代码
Nov 14 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
原生js实现吸顶效果
Mar 13 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
原生JavaScript实现随机点名表
Jan 14 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函数之日期时间函数date()使用详解
2013/09/09 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
js DOM 元素ID就是全局变量
2012/09/20 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python脚本实现验证码识别
2018/06/07 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python实现按关键字筛选日志文件
2019/12/24 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
旅游管理本科生求职信
2013/10/14 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
python中pymysql包操作数据库方法
2022/04/19 Python