网页教学网
 当前位置: 网页教学网 >> 网页制作 >> CSS技术应用 >> 如何用CSS使图片自适应显示宽度
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

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

http://www.webjx.com  更新日期:2007-09-17 10:14  出处:网页教学网  作者:

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

如果用 width 属性强行设定显示尺寸似乎太不智能。幸好 Firefox/Opera/IE 7 都提供了 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,图片
推荐给好友】【关闭】【收藏本文
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为