网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论

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

【 网络作者:佚名 更新时间:2007-11-16 | 字体:
[导读]  当然<<,生成缩略图这个工作如果交给程序来完成<,效果会好很多<<,但是有时出于某种因素<,例如服务器不支持GD之类的,难免就要请CSS代劳

  当然,生成缩略图这个工作如果交给程序来完成,效果会好很多<,但是有时出于某种因素<,例如服务器不支持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同比例缩小图片

友荐云推荐
  • 转载请注明来源:网站运营 网址:http://www.chinawobo.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载<<,但请务必注明出处和原始作者。文章版权归文章原始作者所有<。对于被本站转载文章的个人和网站,我们表示深深的谢意<<。如果本站转载的文章有版权问题请联系我们<<<,我们会尽快予以更正。
RSS订阅
  • QQ邮箱
  • 填写您的邮件地址,订阅我们的精彩内容:
更多
© 2014 网站运营 - T086.com(原itlearner.com)
微商货源 | 冠珠陶瓷 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 |
RunTime:7.64ms QueryTime:7