IT学习者 | 文章大全 | 技术文档 | 桌面壁纸 | 实用查询 | 网络电台 | 成语 | 歇后语 | 网址 | 下载 | 周公解梦 | 生日密码 | 电视剧365 | Flash
 您现在的位置: IT学习者 >> 文章大全 >> 网页制作 >> HTML&CSS

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

【 来源:网络  更新时间:2007-11-16 | 字体:

  当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳。

  把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。

  对于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同比例缩小图片

相 关 文 章
相 关 软 件
逃生 放生 黄玫瑰 想太多 那滋味 擦肩而过 放手去爱 北京欢迎你 依然在一起 吻得太逼真 感动天感动地 坐上火车去拉萨 怎么会狠心伤害我
心碎 冲动 小太阳 别碰我 蒲公英 千山万水 改变自己 一定要爱你 等爱的玫瑰 陷入爱里面 北极星的眼泪 最后一次的温柔 亲爱的那不是爱情
光荣 火花 坏女人 日不落 樱花草 为你写诗 独家记忆 夏天的味道 寂寞才说爱 忘不掉的伤 爱上你是个错 第三者的第三者 地球人都知道我爱你
假如 相思 是非题 有缘人 舍不得 我的答铃 死而无憾 外滩十八号 越爱越难过 123木头人 和寂寞说分手 爱上你是我的错 爱情里没有谁对谁错
加入收藏留言建议自助友情链接普通友情链接站长的Blog
版权所有   COPYRIGHT 2002-2008 ★IT学习者★ ALL RIGHTS RESERVED.