我的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不会自动缩放，这个问题也要引起注意。
第二篇文章：让图片自适应大小的方法
昨天在和动漫网站开发人员的交流中发现一个问题，就是新闻详细页面中的图片不会自适应大小，这其实是一个非常常见的问题，目前我所知的解决办法有以下几种：
1. 用后台程序自动生成缩略图
2. 用css调用expression控制图片溢出后的大小；
（http://www.blog.edu.cn/user1/7987/archives/2006/1440861.shtml ）
3. 用js写函数控制图片溢出后的大小；
其中后两种都是javascript在起作用，但是工作原理不同，css中调用expression可以解决这个问题，但是解决得不好，因为如果页面中图片一多，expression中的语句会不断被调用，非常耗费客户端内存，容易导致浏览器假死；而直接用javascript，在页面onload的时候就可以轻松解决这个问题，而且只调用一次，比起expression真是好得太多，程序很简单，下面是个简单的例子，我假设这个页面图片宽度不能超过200px，而实际图片宽度是550px：
程序代码
<body>
<img id="achome" src="http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg" />
</body>
<script>
var imageArr=document.getElementById("achome");
imageRate=parseInt(imageArr.style.width)/parseInt(imageArr.style.Height);
if(imageArr.offsetWidth>200)
{
imageArr.style.width="200px";
imageArr.style.height=200/imageRate+"px";
}
</script>
HTML代码
<body>
<img id="achome" src="//image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg" />
</body>
<script>
var imageArr=document.getElementById("achome");
imageRate=parseInt(imageArr.style.width)/parseInt(imageArr.style.Height);
if(imageArr.offsetWidth>200)
{
imageArr.style.width="200px";
imageArr.style.height=200/imageRate+"px";
}
</script>
Recent Comments