Выравнивание / сортировка изображений в HTML для разных размеров - PullRequest
3 голосов
/ 28 июня 2011

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

У меня проблема с набором логотипов, которые должны отображаться в контейнере произвольного размера. Каждый логотип имеет разный размер (то есть размер уменьшенного эскиза - это пропорционально измененная версия логотипа).

Итак, давайте предположим, что мы хотим ограничить логотипы виртуальным квадратным квадратом, скажем, 120x120 пикселей, что означает, что получившиеся миниатюры могут состоять из изображений размером 120x20 и 30x120 и так далее. Все они будут разных размеров, но не более 120 пикселей на «длинной» стороне каждого логотипа.

Отлично, теперь для сортировки. У вас, ребята, есть хорошее предложение, как бы я распечатал это? Я бы не хотел печатать каждый из них в квадратном сетчатом пространстве размером 120x120 (на самом деле я вижу, как виртуальный ящик может иметь размер 200x100, и, следовательно, склоняется к тому, чтобы дать больше места горизонтальным логотипам.

Но как мне создать алгоритм (в PHP), чтобы отображать их так, чтобы они выглядели аккуратно сложенными и лучше подходили? Стоит ли просто упорядочить их по вертикали, и чем дальше вы попадете в «список», тем шире будут логотипы?

Любые предложения очень ценятся, и если мне что-то не понятно, не стесняйтесь просить меня уточнить.

1 Ответ

1 голос
/ 28 июня 2011

Я бы сгруппировал и отсортировал их сначала по высоте, упаковав их в группы одинаковой высоты (разница + 5%), а затем по ширине. Каждая группа высот получает свою собственную строку.

Может выглядеть так:

+--------------+ +-----------+ +------+
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | +-----------+ +------+
+--------------+

+------------------+ +-------------+ +-------------+ +-------------+ +------+ +--+ 
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | +--+ 
+------------------+ +-------------+ +-------------+ +-------------+ +------+


+--------------+ +------+
|              | +------+
+--------------+ 

В зависимости от типа изображений или того, что выглядит лучше, самые широкие из них идут первыми или последними в строке.

...