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

爱上暗示as

爱上暗示as

2016-02-19 13:11

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐符合Web标准!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.width50&&obj.widthobj.height?50:auto;
  obj.height=obj.height50?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.width50&&this.widththis.height?50:auto);
  height:expresion(this.height50?50:auto);
  }

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

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

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

利用CSS同比例缩小图片

Web开发
利用CSS同比例缩小图片

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

利用CSS同比例缩小图片技巧

Web开发
利用CSS同比例缩小图片技巧

利用CSS按比例缩小图片

Web开发
利用CSS按比例缩小图片

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

符合Web标准的超链接

Web开发
符合Web标准的超链接

CSS设计符合Web标准的网页表单的几个技巧

Web开发
CSS设计符合Web标准的网页表单的几个技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win2000 Server下安装j2ee

Win2000 Server下安装j2ee

制作高质量的JQuery Plugin 插件的方法

制作高质量的JQuery Plugin 插件的方法
下拉加载更多内容 ↓