Question to say "I can!"

CSS 图片自适应显示宽度

2013-05-05

这个使用尤其中手机屏幕上最有用。

有喜欢方法:

function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
}
}

然后在body区域加上onload="ReImgSize()" 就可以了。经过测试,在Mozilla和IE上通过.。在这里补充一下关于图片的自适应,这点Mozilla做的比IE好,因为可以用CSS来控制图片的自适应。我们都知道Mozilla支持一个max-width 的CSS语法。于是我们这样这样定义图片的全局样式。

img{
max-width:100%;height:auto;
}

这样图片就回在div或table内自动适应其大小了.

 

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标准的做法,不到万不得以不建议使用。



作者:admin | Categories:设计问题 | Tags:

6条评论

  1. 厦门快生活说道:

    不错,正用上了,哈哈!!!

  2. 一起购物吧说道:

    像这样的代码background-image:url(http://www.178by.com/images/1.jpg); 做背景如何适应,我看网上都是用DIV实现的

  3. 网站测速说道:

    博主介绍的这个方法很好用,我最近在做个移动版网页,可以用到这个方法。

  4. 有趣网说道:

    非常有用 帮到我了

  5. t说道:

    还是很有用的,www.verygood.link/wap.php用了楼主第一种方法不管用呢

  6. 说道:

    非常感谢,我做的微信页面刚好用上了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

无觅相关文章插件,快速提升流量