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

默momo魔

默momo魔

2016-02-19 20:28

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享用CSS使图片自适应显示宽度教程,希望对大家能有一点小小的帮助。

  公司的项目中需要显示由用户提供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.width500)?"500px":this.width+"px" 
    }; 
    return’120px’ //加载时显示宽度为120px 
   }(this) 
  ); 
}

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

使TStringGrid自适应宽度

编程语言 网络编程
使TStringGrid自适应宽度

圆角自适应宽度按钮的css实现

Web开发
圆角自适应宽度按钮的css实现

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用CSS控制图片自适应大小

Web开发
用CSS控制图片自适应大小

CSS教程:图片的自适应居中和兼容处理

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS教程:图片的自适应居中和兼容处理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10系统如何去掉“快捷方式”字样

Win10系统如何去掉“快捷方式”字样

想让DIV居中 如何编写CSS

想让DIV居中 如何编写CSS
下拉加载更多内容 ↓