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 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 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
关于PHP的curl开启问题探讨
2014/04/08 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
javascript操作cookie
2017/01/17 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Django的性能优化实现解析
2019/07/30 Python
python生成特定分布数的实例
2019/12/05 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
10个示例带你掌握python中的元组
2020/11/23 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
债务纠纷委托书
2014/08/30 职场文书
先进工作者申报材料
2014/12/23 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
催款通知书范文
2015/04/17 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python