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 checkbox 全选/反选及批量删除
Apr 28 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
element跨分页操作选择详解
Jun 29 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
使用phpQuery采集网页的方法
2013/11/13 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JS交换变量的方法
2015/01/21 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python转码问题的解决方法
2008/10/07 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python文件读写常见用法总结
2019/02/22 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
python连接mongodb集群方法详解
2020/02/13 Python
python实现udp聊天窗口
2020/03/31 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
实习鉴定范文
2013/12/19 职场文书
最新党员思想汇报
2014/01/01 职场文书
大学总结自我鉴定
2014/01/18 职场文书
数控个人求职信范文
2014/02/03 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
老人节标语大全
2014/10/08 职场文书