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.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 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判断ip黑名单程序代码实例
2014/02/24 PHP
smarty内置函数section的用法
2015/01/22 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JavaScript如何操作css
2020/10/24 Javascript
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
老师推荐信
2013/10/28 职场文书
幼儿园运动会口号
2014/06/07 职场文书
经营理念口号
2014/06/21 职场文书
学校周年庆活动方案
2014/08/22 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
财政局长个人总结
2015/03/04 职场文书
聚会通知怎么写
2015/04/23 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
首次购房证明
2015/06/19 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
python实现层次聚类的方法
2021/11/01 Python