適合不同的圖像，如Ted.com所做

Question

如何在固定空間調整大小和適合不同的圖像，如在http://www.ted.com/talks/browse和搜索結果jinni.com中所做的。

任何引導如何做到這一點，就像使用jQuery或php支持的東西。

感謝

Answer 1

它是在TED網站上完成的方式，它們使用Flash和所有圖像只有一個寬高比，這使得算法相當平凡。對於更時尚的外觀（以及嚴重的怪胎點），您可以選擇幾個寬高比（一個正方形，一個縱向，一個或兩個橫向）並自定義構建一個算法，以有效地解決2D子集的一個子集。

更好的是，您可以使用一些漂亮的代數來自動決定哪些尺寸適合指定寬度的矩形，並讓算法自動爲您進行所有調整。這聽起來像是NP-hard黑魔法，但A List Apart實際上有一段很好的文章。它甚至有數學參與和PHP代碼的簡單解釋，你可以下載並修改您的需要：

Automatic Magazine Layout - Example 1

Answer 2

使用浮動：左&固定寬度&高度有明確的：無論在一些圖像會做的伎倆。

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

Answer 3

我相信他正在尋找一種能夠真正執行圖片佈局的算法。

你可以看看Wordle，它似乎做了非常相似的事情（雖然它使用文本，而不是圖像）。

Answer 4

此顯示正確的說法是Treemap。它可能有助於您的算法搜索。有幾種解決方案可用，包括JavaScript和RoR。

即使這些解決方案不適合您，正確的術語應該可以幫助您走上正軌！