CSS Расположение колонок мигает при загрузке изображения

Question

Я использую свойства CSS3 Multiple Columns для реализации макета в стиле Pinterest (реализовано с помощью Bootstrap Cards Columns ). Когда изображения загружаются в первый раз, каждая карта изображения будет отображать sh, поскольку браузер пытается вычислить / переупорядочить каждое изображение в столбцах, как показано ниже:

Я хочу получить опыт, подобный Pinterest, как и до загрузки изображения, карты располагаются в правильном положении с правильным размером и ждут, пока изображение заполнится. Можно ли как-то намекнуть / предварительно установить размер изображения или соотношение в html / css? (Действительные размеры этих изображений больше, чем размер экрана, я попытался установить свойства ширины / высоты в HTML на фактический размер, и это не сработало.)

Текущий HTML выглядит так:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="https://i.stack.imgur.com/78vXO.gif" loading="lazy">
  </div>
  ... more card elements
</div>

. Стиль столбца карты выглядит так:

.card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
}

Answer 1

Я нашел решение, проверив макет Pinterest:

1. Добавьте оболочку <div> вокруг изображения и установите в качестве отступа для div-оболочки значение image.height / image Ширина Например: div-wrapper: { padding-top: 135%; }

2. сделать изображение position: absolute;.

Таким образом, контейнер может быть предварительно определен с использованием отношения изображения, и столбец может быть рассчитан красиво.

Answer 2

Вы можете добавить свойства min-width и min-height для изображения. Или вы можете установить ширину и высоту с помощью подгонки объекта: 'cover'