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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
innerText 使用示例
Jan 23 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
jQuery中extend函数详解
Jul 13 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
处理单名多值表单的详解
2013/06/08 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
express.js中间件说明详解
2019/03/19 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
益模软件Java笔试题
2012/03/27 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
护理学毕业生求职信
2013/11/14 职场文书
关于长城的导游词
2015/01/30 职场文书
太空授课观后感
2015/06/17 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
解析MySQL binlog
2021/06/11 MySQL
Python学习之迭代器详解
2022/04/01 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle