今天看到Flyeon的版主给我发了一个短信：
.gif)
非常有趣的问题，使我回忆起设计时的思绪。在修改Discuz代码的时候，我注意到Discuz可以让用户上传自己喜欢的头像，而头像的显示区域就是帖子左侧头像显示区，正像所有论坛处理的那样。但问题是显示头像的区域只有120x120px，而用户上传的图片可能是任何尺寸，比如100x100，80x120，甚至200x200，完全随机。
按照常理，头像图片理应这样显示：
<img src="头像图片URL" width="头像宽度" height="头像高度" alt="头像" />
但正如上面提到的，显示帖子的程序并不知道每个用户的头像的具体尺寸，因此上面的width和height无法使用，好在W3C的Web标准不需要为img tag设置这两个属性，所以对于头像可以这样显示：
<img src="头像图片URL" alt="头像" />
随之而来的问题就是，一旦用户上传了尺寸超过120x120的图片（比如400x320），那上述代码就现眼了。现在忘了Discuz是如何解决的这个问题，我选择的解决方法是使用CSS的background-color属性代替img tag，因此上述代码将变为：
<some_html_tag style="background-image: url(头像图片URL); width:120px; height: 120px;"> </some_html_tag>
上面的some_html_tag可以根据当场的设计选用适合的tag，比如<div>，而Flyeon网站使用的是<li>。从上面的代码可以清楚地看到，头像图片的URL作为<some_html_tag>的背景属性设置，而随后的width、height可以确保<some_html_tag>永远以120x120的尺寸显示。如果用户上传的头像小于120x120，那么它将出现在头像区域的中间（通过在外部CSS中指定background: center属性），而超过尺寸的头像，将选取头像中部的120x120区域显示。
共有 6 条评论
baiheinet 发表于: 2007年08月 9日 07:46:37 PM
你好，请教一个问题,现在的CMS都是可视化发布文章，如何实现你的flayeon创建美剧人物大全、记录刚看过的剧情那样的向导式发布文章方式，可视化能否向向导式转变，期待你的帮助！！！
concorde 发表于: 2007年08月 9日 10:11:28 PM
向导式发布文章其实是Ajax，把每步做成XML（有时需要上一步的数据生成下一步的XML），输出给Javascript即可。把现有基于HTTP POST的代码改成向导式工作量较大。
baiheinet 发表于: 2007年08月10日 10:11:48 AM
谢谢你如此神速、高效的回答啊。我的网站的发布文章功能也使用了FCKeditor作为WYSIWYG编辑器，能否推荐几篇有关“WYSIWYG转换成向导式”的文章，工作量较大我也要学习学习。
concorde 发表于: 2007年08月10日 04:57:59 PM
向导式跟FCKeditor没有关系，FCKeditor只不过代替HTML的<textarea>。现在任何Web页面提交表格都可以称作向导式，包括这个添加评论功能，只不过用了Ajax，没有刷新页面罢了。
baiheinet 发表于: 2007年08月13日 06:24:20 PM
你的flyeon完全可以当cms用，不知买一份多少钱，我想买一份研究一下
baiheinet 发表于: 2007年08月14日 03:09:24 PM
我今天创建了州长Tancredi的页面，发现一个问题，就是在这个过程中，如果出现错误，就没有了返回，返回的话，前面做好的东西就会丢失。