最新消息:新的一年,启动新的宽屏主题模版,关注更多的web前端!

css完美解决IE6和Firefox下图片超过大小CSS同比例缩放

代码收集 amason 2616浏览 0评论

如果想设定图片的高度和宽度都不超过某一个固定值,就需要在图片高度或宽度超过这个值的时候,让图片按比例缩小到这个尺寸。

1,对于现代浏览器,比如Firefox或是IE7及以上,直接使用max-width和max-height两条CSS属性即可。

2,对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:

  Example Source Code

<imgsrc="..."alt="..."onload="resizeImage(this)"/> 
<script type="text/javascript"> 
  functionresizeImage(obj){ 
  obj.width=obj.width>50&&obj.width>obj.height?50:auto; 
  obj.height=obj.height>50?50:auto; 
  } 
</script>

  这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。

  最终,把一副大图片按比例缩小到50px*50px以内,可以参照以下这段CSS:

  Example Source Code

.thumbImage{ 
  max-width:50px; 
  max-height:50px; 
  } 
  *html.thumbImage{ 
  width:expression(this.width>50&&this.width>this.height?50:auto); 
  height:expresion(this.height>50?50:auto); 
  }

  至于图片是如何保持其高宽比例的,这张图片可以解释:

符合Web标准!CSS同比例缩小图片
 

转载请注明:笑申爱设计|liushen.net » css完美解决IE6和Firefox下图片超过大小CSS同比例缩放

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址