Question

如何在http://www.ted.com/talks/browse和搜索结果jinni.com中对固定空间中的不同图像进行调整和调整。

任何引导如何做到这一点，例如jQuery或php支持的东西。

由于

Answer 1

在TED网站上完成的方式是，他们使用Flash并且只对所有图像使用一个宽高比，这使算法相当简单。为了更加时尚的外观（以及严肃的极客点），您可以选择几个纵横比（一个正方形，一个纵向，一个或两个水平）和自定义构建算法来解决2D的一个子集{{3有效率。

更好的是，您可以使用一些漂亮的代数来自动确定哪些尺寸适合指定宽度的矩形，并让算法自动为您调整所有大小。这可能听起来像NP-hard黑魔法，但bin packing problem实际上有一篇关于它的优秀文章。它甚至可以简单解释所涉及的数学和PHP代码，您可以下载和修改以满足您的需求：

Answer 2

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

即使这些解决方案不适合您，正确的术语也应该帮助您走上正轨！

Answer 3

使用float：left＆amp;固定宽度＆amp;高度清晰：在某些图像上都可以解决问题。

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

Answer 4

我相信他正在寻找一种能够实际执行图片布局的算法。

您可以查看Wordle，它似乎做了非常相似的事情（虽然它使用文字，而不是图像）。