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 版本自动生成文章摘要
Jul 23 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
基于jquery实现图片放大功能
May 07 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 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
请php正则走开
2008/03/15 PHP
如何使用php实现评委评分器
2015/07/31 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python实现多属性排序的方法
2018/12/05 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
给同事的道歉信
2014/01/11 职场文书
鸿星尔克广告词
2014/03/21 职场文书
中学生英语演讲稿
2014/04/26 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
党内外群众意见范文
2015/06/02 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
MySQL数据库 安全管理
2022/05/06 MySQL