网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.css的链接美化.
.CSS语法手册(四)文本填充,边框.
.网页制作必知:初探CSS3的RGBA颜.
.CSS特点及加入网页的四种方法.
.利用相对定位及偏移量做精美输入.
.用Firefox插件调整CSS 优化网页视.
.对CSS类及id的规范化命名.
.CSS 针对 Safari(WebKit)的 CS.
.CSS定高多行垂直居中.
.CSS欺骗,让背景不能滚动.
.CSS定义DIV圆角边框.
.CSS条件注释.
.CSS框架的利与弊.
.css插入透明png(IE6下PNG背景透明.
.CSS初级入门:页面样式的整体声明.
.CSS做一个超链接的陷下效果.
.用CSS制作具有亲和力的表格.
.用CSS制作Alpha滤镜测试板.
.IE6支持PNG格式图片的CSS滤镜写法.
.css修正Input标签在各种浏览器中.

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

发表日期:2007-6-27


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

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

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

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

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

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

程序代码

上一篇:CSS Hack汇总快查 人气:7904
下一篇:技巧总结:div中class与id的区别及应用 人气:13082
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐