热点网|医学教育网|北京pk10开奖直播 pk10开奖直播 北京赛车pk10 pk10开奖直播 北京赛车pk10 PK10开奖直播 北京赛车pk10开奖直播 北京pk10 北京pk10
网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | 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)
  • 河南职业技术学院全国技能(导游类)大赛获佳绩 2018-05-24
  • Футбол -- Арены ЧМ-2018 -- Стадион Нижний Новгород 2018-05-24
  • 美媒:美国对华战略缺乏头脑 2018-05-23
  • 中国钢企布局沿海 柳钢瞄准东盟经济圈 2018-05-23
  • 2018的偶像元年是否只是一场美丽的谎言?偶像练习生创造101选秀 2018-05-22
  • 上海临港有个“儿童大学” 2018-05-20
  • 2017年世界大学学术排名发布 清华进前50大学学术排名大学排行榜 2018-05-20
  • 日本战犯侵华罪行自供 2018-05-19
  • 塑料污染让人痛心 世界最深海沟竟成“垃圾场” 2018-05-19
  • 男子因琐事杀害女友并分尸抛河 警方根据美甲破案嘉兴美甲死者 2018-05-18
  • 166名中国人在泰国操控中国股市被警方押扣审讯 2018-05-17
  • 消防车进商场——“小小消防员”的消防安全乐体验 2018-05-17
  • 学者:“感应舍利”的出现为何是“必然” 2018-05-16
  • 中国等国利用可再生能源创造上千万工作岗位 2018-05-16
  • 只有用在外语环境下学习的人才懂的13个瞬间! 2018-05-16
  • 微商货源 | 冠珠陶瓷 | 6688电视家官网 | 中康体检网 | 安徽极热网 | 北京赛车开奖号码 | 快猴网 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 | 冠珠陶瓷 | 广东旅游景点大全 |
    RunTime:7.64ms QueryTime:7