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

2016-02-19 19:35 7 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享利用CSS同比例缩小图片技巧,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

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

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

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

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

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

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

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

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

来源:http://www.tulaoshi.com/n/20160219/1621368.html

延伸阅读
标签: Web开发
由于现在很多div+css中的图片都写在了css里面。 直接用浏览器的另存为已经不能完全保存到本地 我在网上收集了一些方法,和一些自己的实践,希望对你有所帮助 第一:苦力型 查看网页源文件,然后找到css路径,直接输入到ie地址框内下载既可。打开css找出里面的图片一个一个下载 第二:偷懒型 保存到本...
标签: flash教程
-图片放大缩小移动类: -----------------------class------------------------- class ZoomOpenMove {    private var obj:MovieClip;    private var pos_scale:Number;    private var x_speed:Number;    private var y_speed:Number;    private var scale_s...
标签: Web开发
以下是程序代码: script language="JavaScript" !-- //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){     //参数(图片,允许的宽度,允许的高度)     var image=new Image();     image.src=ImgD.src;    &...
标签: Web开发
一般我们做按钮基本上都需要两张图片,一张正常状态的图片,一张按下去效果图片 做这种按钮思路就是,设置链接a的背景为第一张图片,a:hover的背景为第二章图片 代码如下: HTML代码: a id="theLink"/a CSS代码: #theLink{       display:block;/*因为标签a是内链元素,所以利用这句话将...
新手常常会问到如何给图片减肥,我想可能因为她有图片要传到论坛上来,发现因为图太大,不能通过论坛上图的大小限制设置,在这里就写这个简单的教程。 tulaoshi.com 其实给图片减肥的软件非常非常多,我们还是用大家最常用的photoshop来进行处理,希望可以帮到新手,早就掌握技巧的老鸟就不用看了啊。哈哈..... 1、启动ps,打开图片,选...

经验教程

147

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部