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 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
javascript如何定义对象数组
Jun 07 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python实现KNN分类算法
2019/10/16 Python
python实现吃苹果小游戏
2020/03/21 Python
Python加速程序运行的方法
2020/07/29 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
公司活动邀请函
2014/01/24 职场文书
入党推优材料
2014/06/02 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
水浒传读书笔记
2015/06/25 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python