商猫网络——灵敏的商业嗅觉,网络营销一站式解决方案!
NEWS
新闻观点

如何用jquery控制图片的最大宽度

作者:SEMPHP | VISITORS: | 来源:未知
21
May
2016
有时候我们在网页中插入图片,图片会被撑开外部的容器,溢出到外面。css中有一个属性为max-width,max-width 定义元素的最大宽度。W3C在其官方文档中说“所有主流浏览器都支持 max-width 属性。”扯淡,IE6就不支持该属性,图片照样被撑开。IE下,图片会直接把外框撑宽。所以,在做IE兼容的时候大家都用js控制,现在分享下使用jquery控制图片宽度的方法。
 
主代码如下:
 
<script type="text/javascript">
$(window).load(function() {   
    $(".cont img").each( function() {
  var maxwidth = 800;
  if ($(this).width() > maxwidth) {
   $(this).width(maxwidth);
  }
});  
});  
</script>
 
代码不用解释,值得注意的是两个地方:
 
第一:$(window).load(function() {  
 
声明事件的部分使用$(window).load,不能使用$(document).ready。
我在百度和iteye网站看到有相关的文章,方法都是错误的。根本不起作用。
 
第二:$(".cont img").each( function() 
 
这里是.each( function() { ....  }),each在这里是对指定的图片集合对象逐一调用下面的方法。
 
这种方法兼容大部分的浏览器,效果也很便捷。
上一篇:没有了
相关新闻
网站建设 | 经典案例 | 服务范围 | 新闻观点 | 服务客户 | 关于我们
Keywords: 营销型网站建设 营销型网站建设