关闭

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

标签: cssborderfunctionie扩展工作
713人阅读 评论(0) 收藏 举报
分类:
2007-09-17

  公司的项目中需要显示由用户提供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不应该被轻视!

 
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:788106次
    • 积分:10088
    • 等级:
    • 排名:第1680名
    • 原创:162篇
    • 转载:320篇
    • 译文:1篇
    • 评论:73条
    文章分类