Когда вы просто делаете float: слева от всех миниатюр одинакового размера, галерея выглядит великолепно. Но когда миниатюры разного размера входят в игру, это уже не так.
Каков наилучший способ обработки миниатюр большого размера? Нужно ли вместо этого использовать таблицы?
Я думаю, что лучшим решением является дать каждому миниатюре контейнер div с фиксированным размером, чтобы каждый эскиз занимал одно и то же пространство. Я имею в виду, не изменяйте размер ваших эскизов. Изображение в div должно быть центрировано.
Ни один из возможных решений CSS не выглядит особенно хорошо.
Вместо этого я рекомендую использовать JavaScript + jQuery, в частности, один из этих плагинов:
Я использовал следующий плагин, он отлично работает:
Для тех, кто в 2017 году ищет галерею для изображений разного размера, просмотрите статью css-трюки: https://css-tricks.com/seamless-responsive-photo-grid/