像在 Ted.com 中那样拟合不同的图像答案

【问题标题】：Fitting different images as done in Ted.com像在 Ted.com 中那样拟合不同的图像
【发布时间】：2009-02-19 12:09:24
【问题描述】：

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

任何方法都可以做到这一点，例如使用 jQuery 或 php 支持的东西。

谢谢

【问题讨论】：

【解决方案1】：

在 TED 网站上的做法是，他们使用 Flash 并且所有图像只有一个纵横比，这使得算法相当简单。对于更时尚的外观（以及严重的极客点），您可以选择几个纵横比（一个正方形、一个肖像、一个或两个水平）并自定义构建算法来解决 2D 的子集bin packing problem高效。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在某些图像上使用 float:left 和一个固定的宽度和高度以及一个 clear:both 就可以了。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：