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将光标聚焦在文本最后的实现代码
Mar 28 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
Angular实现的简单定时器功能示例
Dec 28 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
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来自动调用不同服务器上的flash
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP中读写文件实现代码
2011/10/20 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
元旦晚会邀请函
2014/02/01 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
社区结对共建协议书
2016/03/23 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
CSS的calc函数用法小结
2022/06/25 HTML / CSS