拟合不同的图像，就像在Ted.com中一样

Question

如何像在http://www.ted.com/talks/browse和搜索结果jinni.com中那样，在固定的空间中调整和适应不同的图像。

任何关于如何做到这一点的线索，比如使用jQuery或php，都会提供一些支持。

谢谢

Answer 1

就像在TED网站上做的那样，他们使用Flash和所有图像只有一个纵横比，这使得算法相当简单。对于更时尚的外观(以及严肃的极客观点)，你可以选择几个宽高比(一个正方形，一个肖像，一个或两个水平)，并定制一个算法来高效地求解2D bin packing problem的子集。

更好的是，您可以使用一些漂亮的代数来自动确定哪些大小适合指定宽度的矩形，并让算法自动为您调整所有大小。这听起来可能像NP-hard的黑魔法，但A List Apart实际上在不久前就有一篇关于它的很好的文章。它甚至对所涉及的数学和PHP代码进行了简单的解释，您可以下载并根据需要进行修改：

Automatic Magazine Layout -- Example 1

Answer 2

此显示的正确术语是Treemap。它可能对你的算法搜索有所帮助。有几种可用的解决方案，包括JavaScript和RoR。

即使这些解决方案对你不起作用，适当的术语也应该帮助你走上正轨！

Answer 3

在一些图片上使用float:left &一个固定的宽度和高度和一个clear:都可以做到这一点。

img.big{
 float:left;
 width:100px;
 height: 100px;
}
img.small{
 float:left;
 width:50px;
 height:50px;
}
img.clear{
 clear:both;
}