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 相关文章推荐
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
react build 后打包发布总结
Aug 24 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
Vue OpenLayer测距功能的实现
Apr 20 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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
python3 配置logging日志类的操作
2020/04/08 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
2014年党务公开方案
2014/05/08 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
失职检讨书大全
2015/01/26 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
windows系统安装配置nginx环境
2022/06/28 Servers