利用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 相关文章推荐
Jquery插件之打造自定义的select标签
Nov 30 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
浅谈Vue.js
Mar 02 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
AngularJS的一些基本样式初窥
2015/07/27 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python实现ipsec开权限实例
2014/11/11 Python
给Python入门者的一些编程建议
2015/06/15 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
高一生物教学反思
2014/01/17 职场文书
火车的故事教学反思
2014/02/11 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
初中教师个人工作总结
2015/02/10 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
Python开发简易五子棋小游戏
2022/05/02 Python