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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php ci框架验证码实例分析
2013/06/26 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
python之import机制详解
2014/07/03 Python
python中base64加密解密方法实例分析
2015/05/16 Python
python中import学习备忘笔记
2017/01/24 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python实现飞船大战
2020/04/24 Python
python中tab键是什么意思
2020/06/18 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
给全校老师的建议书
2014/03/13 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python