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插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件FusionCharts实现的2D柱状图效果,结合完整实例形式分析了FusionCharts插件绘制2D柱状图的实现步骤与相关属性设置技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
jQuery Ajax传值到Servlet出现乱码问题的解决方法
jquery ajax 传值给Servlet,在Servlet里Get接受参数乱码,怎么解决呢？下面小编给大家带来了jquery ajax传值到Servlet出现乱码问题的解决方法，一起看看吧2016-10-10
ajax得到值，用JQUERY绑定给对应的UL.利用JQUERY的动画来实现他们的滚动公告。2011-04-04
这篇文章主要介绍了jQuery实现分隔条左右拖动功能，需要的朋友可以参考下2015-11-11
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下2014-05-05
对于表格来说，当数据比较多的时候，我们无法一页一页的查找，这样我们就可以进行筛选操作，这篇文章主要为大家详细介绍了基于jquery实现表格内容筛选功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
jquery用get实现ajax在ie里面刷新不进入后台解决方法
jquery用get实现ajax在ie里面刷新不进入后台的情况想必大家都有遇到过吧，下面与大家分享下具体的解决方法，希望对大家解决问题有所帮助2013-08-08
jQuery 瀑布流 浮动布局（一）(延迟AJAX加载图片)
瀑布流：这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部2012-05-05
这篇文章介绍了jQuery 获取浏览器所在的IP地址的小例子，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了jquery使用echarts实现有向图可视化功能,结合完整实例形式分析了jquery的echarts.js插件实现有向图可视化相关实现技巧与操作注意事项,需要的朋友可以参考下2019-11-11
最新评论