Сетка отображает изображения при минимальном искажении размера

Question

Я хотел бы иметь возможность отображать коллекцию изображений в формате сетки без чрезмерного искажения соотношения ширина / высота. Подобно стилю веб-сайта, как pinterest.

Прямо сейчас у меня есть неупорядоченный список с foreach, который генерирует элементы списка.

    <ul class="pizza-cards">

        @if (specials != null)
            {
        @foreach (var special in specials)
                {
        <li @onclick="@(() => OrderState.ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
            <div class="pizza-info">
                <span class="title">@special.Name</span>
                @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
            </div>
        </li>
                }
            }
    </ul>

Проблема в том, что все элементы имеют одинаковый размер. Это означает, что изображения, которые не являются квадратными, искажены.

Цель

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

Я подумал об этом, позволив пользователю выбрать стиль фрейма 'при загрузке своих данных. А затем оборачиваем каждый из этих стилей отображения внутри оператора switch, чтобы решить, как он будет отображаться. Но даже в этом случае я не уверен, как вы могли бы избежать того, что сетка окажется в конце, как показано ниже, где другие элементы списка смещены и не помещаются во все доступное пространство.

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