⽤CSS使图⽚⾃适应显⽰宽度
做⽹站的时候经常遇到，新闻展⽰等，⽤户上传的图⽚太⼤了⾃⼰⼜不去调解，导致展⽰的时候图⽚太⼤撑开了，使页⾯显⽰的很难。这⾥利⽤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:700px;
width:expression(
九年级语文教学计划 function(img){
格兰仕微波炉说明书 load=function(){
生活中的物理 this.style.width='';
this.style.width=(this.width>700)?"700px":this.width+"px"
};
return '700px'
德化陶瓷>秦时明月之焚书坑儒 }(this)
);
}
利⽤<img>的onload事件使图⽚加载完成后计算其尺⼨⼤⼩，假如超过500像素就显⽰为500像素，否则显⽰其默认宽度。
expression不是符合WEB标准的做法，不到万不得以不建议使⽤。但是不能不承认IE的很多扩展是不错的，IE不应该被轻视！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论