1. 第6期
参差不齐的图片列表
关于图片列表的显示方式讨论会
谷隐 2009/05/20

2. 参差不齐的图片列表
1. 什么问题?
Img :padding border
第6期

3. 参差不齐的图片列表
Img :border
第6期

4. 参差不齐的图片列表
none
第6期

5. 参差不齐的图片列表
Height 固定
第6期

6. 参差不齐的图片列表
Img {height:100px;
Width:100px;
border:1px solid #ccc}
第6期

7. 参差不齐的图片列表
外框固定高度,图片限
制最大高度和宽度
第6期

8. 参差不齐的图片列表
Overflow? 或者程序来处理图片.
第6期

9. 参差不齐的图片列表
自由型
第6期

10. 参差不齐的图片列表
外框固定
第6期

11. 参差不齐的图片列表
跟WINXP一样
第6期

12. 参差不齐的图片列表
跟WINXP一样
第6期

13. 参差不齐的图片列表
2. 为什么有这种问题?
a.图片自身问题：图片本身就有一个长宽比例的问题。（延展讨论：最佳长
宽比例是多少？4:3?16:9?）
b.用户的问题：一般会出现这种问题的图片列表都是读取用户上传的图片。
用户不会处理图片，或者不想处理图片，或者不可能都处理过。（延展讨论：
我们从程序上能给用户作些什么？）
c.图片种类无限制：我们发现有些图片列表的显示一直是规则而美观的：
比如电子杂志的列表。
比如大部分电影网站的图片列表。
比如有些摄影网站的图片列表。
最典型的是友情链接的图片：88*31
这些网站或者说行业已经给图片的展现方式定下了规则。（延展讨论：我们需
要规则么？）
第6期

14. 参差不齐的图片列表
3.a)怎样实现图片列表的规则化显示?
a.固定图片显示区域的高度，用CSS裁切。
#div{overflow:hidden}
b.固定图片显示区域的高度，用CSS修饰。
img {padding:2px;border:2px solid #ccc}
c.固定图片显示区域的高度，用JS控制最大高度或者最大宽度。
If img.height>600 then img.height=600
第6期

15. 参差不齐的图片列表
3.b)怎样制定图片列表中的图片参数的规则?
a.图片的比例要求多少？
b.图片的长宽像素值（物理大小需要规则么？）
c.图片格式需要规则么？
第6期

16. 参差不齐的图片列表
4. 延展：程序上对用户上传的图片如何优化处理?
A.如何裁切图片？
B.如何压缩图片？
C.图片格式需要定下来么？
D.生成几套图片才能满足网站的使用?
第6期

17. 鸣谢:无酬
Over! Thank you!
第6期