October 6, 2007
如何限制页面中图片的大小
由于更换了新的主题，页面正文的宽度从 540px 缩到了 520px，导致原先一些日志中宽度大于 520px 的图片会把页面撑破，侧边栏掉到正文底下去，页面布局乱得不堪入目。因此，需要让这些超过限制宽度的图片自动缩小以适应当前页面，我摸索了一些方法，写出来抛抛砖。
Firefox 的解决办法
只需要修改 CSS 样式表的一行代码，给正文中的 img 加上 max-width 属性：
#content img{max-width:520px;}
max-width 属性会自动将正文中超过限宽的图片成比例地缩小到 520px 宽度，方便快捷，在 Firefox 2 浏览器中测试通过。我没有 Opera、Safari，但它们应该是支持 max-width 属性的，听说 IE7 （可能）也支持该属性，反正 IE6 是不行的，所以还得为 IE6 想专门的办法。
IE6 的解决办法
1. 使用带有表达式的 CSS 样式
#content img{max-width:520px;width:expression(document.body.clientWidth> 520? "520px": "auto" );}
这个方法看上去似乎是可以的，但我在测试时发现，宽度超过 520px 的图片的确已经缩小，但是后面出现的小图片的宽度被放大到了 520px。我认为可能是页面中一旦有图片宽度超过 520px，width 属性的值就会固定为 520px，导致出现刚才说的问题。这个方法出自这里，大家研究一下，看是不是我用错了。
2. 使用 JavaScript 调整
其实最初我就想到 JavaScript，但脚本只能在页面装载完成之后执行，网络状况不太好的话，需要加载很长一段时间才能轮到脚本执行，用户体验较差；另外，如果用户关闭了浏览器的 JavaScript 支持，这个方法也就失效了。
<!--[if IE 6]>
<script type="text/javascript">
window.onload = function() {
for (var index = 0; index <document.images.length; index++) {
var maxWidth = 520;
if (document.images[index].width> maxWidth) {
document.images[index].width = maxWidth;
}
}
}
</script>
<![endif]-->
<script type="text/javascript">
window.onload = function() {
for (var index = 0; index <document.images.length; index++) {
var maxWidth = 520;
if (document.images[index].width> maxWidth) {
document.images[index].width = maxWidth;
}
}
}
</script>
<![endif]-->
总结
一句话，希望 IE6 早日被淘汰！
心想事成的秘密 at 00:16 Oct 07, 2007 ₪
冰仔，有个问题想向你请教。
我看了Aweber这个页面的1，2，3 的呈现方式很简单，但是我不懂得它的css码到底是怎么套用的。你能不能写一篇文章讲解一下？
如果我们要把css写入一个html文件，又应该怎样写呢？
我目前修改wp主题都是看到别人有什么好用的代码，直接找style.css自己添加上去的，但是要添加到html文件就从来没有试过。
敬请指教！
紫雨
北极冰仔 at 08:55 Oct 07, 2007 ₪
紫雨 » 我先在这里说一下吧，大概思路是这样的：1、2、3 形式完全一样，所以只需要做出一个来重复多次就行了。每个块用一个大的 div 容器，里面再使用三个小的 div 容器，分别是 block-header、block-content、block-footer，并在 CSS 样式中分别设置三张对应的背景图片（header、content、footer）就可以了，把所有内容写在 block-content 容器中，包括标题、正文和左边的数字图片。如果需要在 html 文件中写 css 代码，可以使用 script 标签，type 属性为 “text/css”。
帕兰卓一得 at 16:18 Oct 12, 2007 ₪
你的PLAIN TEXT是用CSS还是插件实现的。麻烦告知一下。我的邮件是parandroid.com@gmail.com。可以发邮件或者在G上聊一下。找不到你的IM联系方式。
北极冰仔 at 17:11 Oct 12, 2007 ₪
老帕 > 是用 iG:Syntax Hilite 插件实现的。
征途私服 at 13:47 Oct 19, 2007 ₪
好东西.
阿香 at 12:04 Mar 04, 2008 ₪
可如何解决比例问题呢？
敬请指教，谢谢
北极冰仔 at 12:10 Mar 04, 2008 ₪
阿香 » 只需要改变宽度，高度会自适应。