利用CSS同比例缩小图片

2016-02-19 13:07 12 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:

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

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

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

延伸阅读
  <style @media print{ INPUT {display:none} } </style <TABLE border="0" style="font-size:9pt;" width="300px" align="center" <THEAD style="display:table-header-group;font-weight:bold" <TR<TD colspan="2" align="center" style="font-weight:bold;border:3px double red"每页都有的表头</TD</TR <...
标签: Web开发
原理:图片加载完后把图片的尺寸固定在一个固定的范围之内。。 JS Code: script type="text/javascript" var proMaxHeight=100; var proMaxWidth=100; function ImgAuto(ImgD) { var image=new Image(); image.src=ImgD.src; image.onload = function(){ if(image.width0&&image.height0) { var rate=(proMaxWidth/image.widthpr...
今天在看视觉规范的时候,大高走过来说帮他们那边看一个问题。又是一个关于自适应的问题。不过,我喜欢。瞄了一下,需求是这样的:用户上传照片,照片的尺寸未知;需要生成一个预览,这个预览图要根据提供给用户预览的区域自应用,并且居中;如果图片太大,需要按比例缩放。如下图。   瞄了一下,居中可以用 text-align:center; 来实...
画图软件如何快速缩小图片大小   越来越多的人有能力购买和拥有一台属于自己的相机,并随时随地拍摄下身边美好的一切,但是我们发现照相机拍下的文件像素很高,所以照片很大,分辨率高的甚至都达到10M。 然而有些照片,并不需要细致入微地查看,所以浪费了硬盘空间。那么如何快速缩小图片大小呢?今天就教大家,很简单的哦!一起来...
标签: Web开发
农历七月初七也就是七夕被誉为中国的情人节,七夕的起源来自于古老的神话故事“牛郎织女”,每年的农历七月七,为了祝福这对天上人间的神仙眷侣重逢的日子,许多商家和大众都开展一系列活动来庆祝。今年七夕就快到了,我们使用FireWorks工具绘制一张牛郎织女的美图,为他们搭建一座鹊桥以示祝福(图1)。 图1 一、背景设计 1...

经验教程

715

收藏

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