jquery实现图片等比例缩放以及max-width在ie中不兼容解决


Posted in Javascript onMarch 21, 2013

上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题

jQuery部分代码

<script type="text/javascript"> 
$(document).ready(function(){ 
var maxWidth=$(".imgBox").width(); 
$("img").each(function(){ 
if(!$.support.style&&$.browser.msie&&($.browser.version==6.0)){ //判定浏览器为ie6的时候 
var imgWidth=$(this).width(); 
var imgHeight=$(this).height(); 
var maxHeight = maxWidth*imgHeight/imgWidth; 
if(imgWidth>maxWidth){ 
$(this).css("width",maxWidth).css("height",maxHeight); 
} 
} 
}) 
}) 
</script>

css部分代码:
<style type="text/css"> 
body{ margin:0; padding:0;} 
.box{ width:700px; margin:0 auto;} 
.imgBox{ background:#CCCCCC;*display:table-cell; width:400px; margin:10px auto; *font-size:350px; line-height:400px; text-align:center; vertical-align:middle; padding:20px;} 
img{ border:0 none; max-width:400px; overflow:hidden; vertical-align:middle;} 
</style>

html代码:
<div class="box"> 
<div class="imgBox"> 
<img src="images/12.jpg" alt="等比例缩放图片"/> 
</div> 
</div>
Javascript 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 #Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 #Javascript
jquery实现网站超链接和图片提示效果
Mar 21 #Javascript
jquery 表格的增行删行实现思路
Mar 21 #Javascript
杨氏矩阵查找的JS代码
Mar 21 #Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 #Javascript
js禁止document element对象选中文本实现代码
Mar 21 #Javascript
You might like
在JavaScript中调用php程序
2009/03/09 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
React Native中Mobx的使用方法详解
2018/12/04 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python3判断url链接是否为404的方法
2018/08/10 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
python代码实现图书管理系统
2020/11/30 Python
phpquery中文手册
2021/03/18 PHP
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
检讨书范文大全
2015/05/07 职场文书
调研报告的主要写法
2019/04/18 职场文书