Подгонка различных изображений, как сделано в Ted.com

Question

Как изменение размера и подгонка различных изображений в фиксированном пространстве, как это сделано в http://www.ted.com/talks/browse и результатах поиска jinni.com.

Любые подсказки, как это можно сделать, например, с помощью jQuery или с поддержкой php.

Спасибо

Answer 1

Правильный термин для этого отображения - Treemap . Это может помочь с вашим алгоритмом поиска. Доступно несколько решений, включая JavaScript и RoR .

Даже если эти решения не работают для вас, правильный термин должен помочь вам встать на правильный путь!

Answer 2

То, как это делается на веб-сайте TED, они используют Flash и только одно соотношение сторон для всех изображений, что делает алгоритм довольно тривиальным. Для еще более стильного вида (и для серьезных компьютерных точек) вы можете выбрать пару форматов изображения (один квадрат, один портрет, одну или две горизонтали) и создать собственный алгоритм для решения подмножества 2D . проблема упаковки бункера эффективно.

Еще лучше, вы могли бы использовать некоторую изящную алгебру, чтобы автоматически решить, какие размеры будут вписываться в прямоугольник указанной ширины, и чтобы алгоритм делал все изменения размера для вас автоматически. Это может звучать как NP-черная магия, но у A List Apart действительно была отличная статья об этом некоторое время назад. В нем даже есть простое объяснение математики и PHP-кода, который вы можете загрузить и изменить в соответствии со своими потребностями:

Автоматическая разметка журнала - Пример 1

Answer 3

Я считаю, что он ищет алгоритм, который на самом деле будет выполнять макет изображения.

Вы можете посмотреть на Wordle , который, похоже, делает нечто очень похожее (хотя использует текст, а не изображения).

Answer 4

Использование float: left & фиксированной ширины и высоты с прозрачным: оба на некоторых изображениях добьются цели

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