Адаптивный макет Masonry без предопределенной ширины ⇐ CSS

[Anonymous]

Я создаю макет кладки из двух колонн, используя изображения разных размеров. Изображения могут быть любого размера, если они имеют наибольший общий делитель (как того требует плагин Masonry).
Чтобы сделать макет адаптивным, я конвертирую ширину элементы кладки в процентах (или я могу использовать минимальную ширину и ширину 100%).
Обновление: Я заметил, что многие из тех, кто отвечает, делают оба столбца 50%, как решение. Это работает, но не является целью. Изображения должны сохранять исходный размер. Они могут уменьшаться, но сохранять то же соотношение.

Код: Выделить всё

$(function () {
var container = $('#container');

// Convert .box width from pixels to percent
$('.box').find('img').each(function () {
var percent = ($(this).width()) / container.width() * 100 //convert to percent;
$(this).closest('.box').css('max-width', percent + '%');
});

// Trigger masonry
container.masonry({
itemSelector: '.box',
columnWidth: 1 //widths dividable by 1
});
});

jsfiffle: http://jsfiddle.net/AMLqg/278/
Кажется, это работает. Элементы плавно перемещаются при изменении размера окна. Однако если вы загрузите скрипт в окне небольшого размера (меньше ширины двух столбцов), элементы схлопнутся. Как обеспечить отзывчивость элементов кладки при загрузке окна, даже если оно меньше?
Обновление: Вот дополнительная информация для лучшего понимания. Я пытаюсь сохранить два адаптивных столбца независимо от размера окна. Столбцы не могут иметь одинаковую ширину, поскольку изображения имеют разную ширину. По этой причине я использую columnsWidth: 1, поскольку все значения ширины делятся на 1.
Примеры см. на изображениях ниже.
Проблема: Когда вы открываете страницу в маленьком окне, элементы сворачиваются. Когда вы изменяете размер окна, чтобы увеличить его, элементы остаются свернутыми до тех пор, пока ширина окна не превысит ширину обоих элементов.


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



Подробнее здесь: https://stackoverflow.com/questions/268 ... ned-widths