网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
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的三种selector.
.动易模板常用CSS修改实际操作技巧.
.提升兼容不同浏览器CSS Hack的写.
.简单的CSS改进网站设计的三个技巧.
.CSS 循序渐进(四)表里春秋.
.CSS公用文件.
.创建性感CSS样式表的十个技巧.
.网页(WEB)字体,CSS如何控制?.
.解决用CSS控制DIV居中失效的问题.
.纯CSS的下拉菜单 支持IE6 IE7 Fi.
.CSS条状图表形式的实现方法.
.CSS实用教程(一).
.鼠标经过背景变色之CSS+DIV方法.
.用CSS写的星级评分.
.解决倾斜鼠标翻转导航制作麻烦问.
.纯CSS制作的网页中的lightbox效果.
.Css中的filter常用滤镜属性及语句.
.解决浏览器的等宽空格CSS问题方法.

用CSS使图片自适应显示宽度

发表日期:2008-8-20


公司的项目中需要显示由用户提供URI链接的图片,可是预先无法获知图片的尺寸大小,假如图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩略图,涉及的后台工作较为复杂,用CSS进行控制是个能够接受的捷径。

假如用width属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width属性支持。

假定希望图片显示宽度不超过500像素,CSS可能如下:

以下为引用的内容:
fit-image{ 
  border  :0; 
  max-width:500px; 
}


让我痛恨的IE6不支持max-width属性,但是利用IE独有的expression属性能够迂回的解决这个问题。

以下为引用的内容:
fit-image{ 
  border  :0; 
  max-width:500px; 
  width:   expression( 
   function(img){ 
    img.onload=function(){ 
     this.style.width=’’; 
     this.style.width=(this.width>500)?"500px":this.width+"px" 
    }; 
    return’120px’ //加载时显示宽度为120px 
   }(this) 
  ); 
}


利用<img>的onload事件使图片加载完成后计算其尺寸大小,假如超过500像素就显示为500像素,否则显示其默认宽度。 

expression不是符合WEB标准的做法,不到万不得以不建议使用。但是不能不承认IE的很多扩展是不错的,IE不应该被轻视!

上一篇:如何用CSS制作生日蜡烛代码 人气:1035
下一篇:CSS制作圆角导航的另一思路 人气:1250
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐