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 相关文章推荐
网上抓的一个特效
May 11 Javascript
js的闭包的一个示例说明
Nov 18 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
微信小程序如何使用云开发
May 17 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
JavaScript流程控制(分支)
Dec 06 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实现获取域名的方法小结
2014/11/05 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
JsRender实用入门教程
2014/10/31 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JSONP之我见
2015/03/24 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python发送邮件实例分享
2017/07/28 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
python安装requests库的实例代码
2019/06/25 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
详解python中的lambda与sorted函数
2020/09/04 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
保护动物倡议书
2014/04/15 职场文书
酒店节能降耗方案
2014/05/08 职场文书
航空学院求职信
2014/06/11 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS