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 相关文章推荐
图片之间的切换
Jun 26 Javascript
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
微信小程序之购物车功能
Sep 23 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php 字符串替换的方法
2012/01/10 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
Python实现拼接多张图片的方法
2014/12/01 Python
详解Django中的权限和组以及消息
2015/07/23 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
升学宴演讲稿
2014/09/01 职场文书
学习退步检讨书
2014/09/28 职场文书
幼儿学前班评语
2014/12/29 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang