解决图片撑破页面的问题

我的Blog的文章正文部分宽度只有500px,如果文章里加了一幅宽度超过500px的图片,无论是IE还是Firefox下都会出现撑破页面的情况。

2006年6月5日,我在调整Blog的CSS。因为K2模版是老外做的,很多地方显示的并不好看,于是找了个CSS中文手册,边学边调。K2默认的CSS里,文章内容内的图片的CSS中有一项"max-width: 100%;",查了一下,说是限制对象的最大宽度。于是就在自己的CSS里把max-width这一项设置为500px,在Firefox里测试成功。

今天上网看到shura留言,赶紧到IE里测试了一下,果然页面被撑破了。再上网一查,原来Firefox和Opera都支持max-width,但是IE不支持。google max-width IE,发现有一篇很好的介绍如何在不支持max-width的IE里实现相同效果的文章《max-width in Internet Explorer》,详细说明了用IE提供的expression命令执行Javascript代码来实现max-width效果的方法。还有2003年11月的一篇讨论组文章max-width in I.E.,里面有用expression的两段代码,都可以实现max-width效果。

看看我的代码吧:

#primary .itemtext img {
    max-width: 500px;
    width: expression(this.width > 500 ? "500px" : this.width);
}

Update:好像在IE里,第一次进的时候显示会不正常,F5刷新一次就好了。Windows 2000+IE 6.0 SP1。

Update2:前几天换了True Blue style,文章部分的宽度由500px变成了545px,再加上K2更新换了class名,所以又仔细看了下代码,做了一点修改,如下:

#primary .entry-content img {
    max-width: 545px;
    width: expression( this.width > 545 ? "545px" : (this.width+"px") );
}

换用True Blue style以后,在IE下第一次打开页面时图片会显示不正常的问题已经不再出现了。重新换回原来的style测试了一下,具体的现象是一些大的图片会变小,而一些小的图片比如,本来是10px*10px的,现在会显示的很大,用IE看属性,大小是28px*28px。具体的原因我也不知道,10个多少单位等于28px呢?10pt吗?我这次在后面加上"px"两个字符,应该能解决问题吧。

另外就是IE和Firefox都有的放大缩小图片的算法不好的问题。比如我使用的flickr,如果直接在页面上放上1024*768原始大小的图片,经过缩小后显示成宽度为545px的图片,非常不清晰,字都看不清,而使用flickr提供的500px的图片则效果不错。用过PS的人都知道,图片缩放时可以选择多个缩放算法,flickr专门做在线图象存储,算法应该不错,而浏览器的算法可能是怕影响显示速度而使用了比较差的算法。所以,能使用小图片的还是尽量用小图片,max-width只是个权宜之计。

还有Firefox下如果直接copy了flickr提供的显示图片的html代码,img标签里已经设置好了width和height属性,经过max-width后,width缩小成545px了,但是height不会自动缩放,这个问题也要引起注意。

本文共有 11 条评论解决图片撑破页面的问题


  1. 1 myheimu

    好像有问题呀,我在我的trueblue_myheimu.css中放入了你的代码,但是我发现即使是没有那么宽的图片也会变成很宽的图片,你在我的文件里调整试试,现在我已经注释掉了那段代码。
    我的图片大多写了height,是不是因为没有写width?

    1. 2 yskin

      好像写错了。应该用width而不是clientWidth,哈哈

  2. 3 tran

    这个方法好~!
    我去试试

  3. 4 博客屋

    我也遇到同样的问题,谢谢哦!

  4. 5 爱狗

    我没你那么幸运,所有小图片全放大到了500的宽度...

  5. 6 爱狗

    找到了一个很好的解决方法
    http://www.jaylee.cn/archives/41

  6. 7 yskin

    会么?代码里有判断width是否大于500呀。

    js的解决办法是很不错的,不过Firefox和Opera里用max-width是最好的。让那段js只在IE里运行吧。

    另外那段js代码里延迟执行的方法很值得参考。

  7. 8 爱狗

    所以我也奇怪啊....

    具体css代码:

    .post img{
    border: 1px solid #85927C;
    padding: 3px;
    margin: 5px 0 5px 0;
    max-width: 500px;
    width: expression( this.width > 500 ? "500px" : (this.width "px") );
    }

  8. 9 程序员

    恢复爱狗:
    我也碰到那个情况,在IE里。
    我把表达式里“:”后面的值换成了"auto",问题就解决了。

    5 爱狗
    2006-9-8 9:37 下午
    我没你那么幸运,所有小图片全放大到了500的宽度...

  1. 1 好吃不如饺子 : Blog Archive : links for 2006-12-04
    Pingback2006-12-5 2:20 上午
  2. 2 ourr » links for 2006-12-04
    Pingback2006-12-5 7:34 上午

请留下您的评论: