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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
nuxt引入组件和公共样式的操作
Nov 05 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
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP生成图片缩略图类示例
2017/01/12 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python3制作捧腹网段子页爬虫
2017/02/12 Python
python入门教程之识别验证码
2017/03/04 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python实现控制台输出彩色字体
2020/04/05 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
学校安全检查制度
2014/01/27 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
技术比武方案
2014/05/19 职场文书
擅自离岗检讨书
2014/09/12 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
婚礼家长致辞
2015/07/27 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
win sever 2022如何占用操作主机角色
2022/06/25 Servers