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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
elementui的el-popover修改样式不生效的解决
Jun 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
15种PHP Encoder的比较
2007/03/06 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
javascript history对象详解
2017/02/09 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
高中生职业规划范文
2014/03/09 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
2015年班级工作总结范文
2015/04/03 职场文书