我的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不会自动缩放,这个问题也要引起注意。
好像有问题呀,我在我的trueblue_myheimu.css中放入了你的代码,但是我发现即使是没有那么宽的图片也会变成很宽的图片,你在我的文件里调整试试,现在我已经注释掉了那段代码。
我的图片大多写了height,是不是因为没有写width?
好像写错了。应该用width而不是clientWidth,哈哈
这个方法好~!
我去试试
我也遇到同样的问题,谢谢哦!
我没你那么幸运,所有小图片全放大到了500的宽度...
找到了一个很好的解决方法
http://www.jaylee.cn/archives/41
会么?代码里有判断width是否大于500呀。
js的解决办法是很不错的,不过Firefox和Opera里用max-width是最好的。让那段js只在IE里运行吧。
另外那段js代码里延迟执行的方法很值得参考。
所以我也奇怪啊....
具体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") );
}
恢复爱狗:
我也碰到那个情况,在IE里。
我把表达式里“:”后面的值换成了"auto",问题就解决了。
5 爱狗
2006-9-8 9:37 下午
我没你那么幸运,所有小图片全放大到了500的宽度...