jquery实现图片等比例缩放以及max-width在ie中不兼容解决
更新时间：2013年03月21日 15:59:30 作者：
图片等比例缩放在某些情况下还是比较事用的,不过max-width和max-height在ie6中不兼容问题很是郁闷，接下来使用jQuery解决这个问题，感兴趣的各位可以参考下哈
上次用原生的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>
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>
相关文章
想必大家对于jQuery这个最流行的javascript类库都不陌生，而且只要是前端开发人员肯定或多或少的使用或者接触过，在这篇文章中，参考了一些资料及实际使用效率，将介绍一些书写高质量jQuery代码的原则，不单单会告诉你如何去书写，也会告诉你为什么这样书写，希望大家会觉得有所帮助2014-03-03
jquery radio的取值_radio的选中_radio的重置方法
下面小编就为大家带来一篇jquery radio的取值_radio的选中_radio的重置方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了Jquery使用css方法改变样式的方法,实例分析了jQuery中css方法操作样式的技巧,需要的朋友可以参考下2015-05-05
jquery 可以用text()方法来取得字符串，再用length 判断长度，然后用substring()方法格式化截断2011-09-09
jQuery插件bgStretcher.js实现全屏背景特效
可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。2015-06-06
这篇文章主要介绍了jQuery循环遍历子节点并获取值的方法,涉及jQuery节点的遍历与属性操作相关技巧,需要的朋友可以参考下2016-04-04
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
这篇文章主要介绍了jQuery+C#实现参数RSA加密传输功能,结合具体实例形式分析了js使用jsencrypt.js插件前端字符数据处理传输及C#后台数据转换与RSA加密相关操作技巧,并附带jsencrypt.js供读者下载参考使用,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery使用hide方法隐藏页面上指定元素的方法,涉及jQuery使用hide隐藏元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
jquery dialog键盘事件代码，检测回车等事件的触发问题。2010-08-08
最新评论