Плавающие изображения с несколькими размерами в CSS

Question

Я хочу иметь возможность создавать баннер с плавающими изображениями на основе того, что загружено пользователями. Инструмент должен иметь изображения 50х50 и 100х100. На данный момент я просто хочу случайным образом отобразить изображения и попытался применить float: left. Однако, как вы можете видеть ниже - это оставляет пробелы.

Есть ли простой способ сделать это без программного позиционирования изображений?

Если вам нужен код, он здесь:

.wall {
    width: 300px;
    background-color: red;
    display: table;
}

.wall img {

    float: left;

}

и

<div class="wall">
    <img src="man1.png" alt=""/>
    <!-- ETC... !-->
</div>

Answer 1

Я думаю, вам нужно написать код.Первое, что я замечаю, это то, что все зазоры заполняются изображением 50х50 (самое маленькое).Я бы попробовал реализовать следующее:

1. Случайно заполнить страницу изображениями 50x50.
2. Абсолютно расположить несколько изображений 100x100.Они будут охватывать 4 базовых изображения размером 100x100.

Похоже, это будет работать (еще не пробовал), но, надеюсь, это поможет.

Боб