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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
详解如何用模块化的方式写vuejs
Dec 16 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
详解webpack自定义loader初探
2018/08/29 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python实现简单加密解密机制
2019/03/19 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
创先争优个人承诺书
2014/08/30 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
小学运动会开幕词
2016/03/04 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS