Как сверстать страницу с резиновыми картинками, чтобы она не прыгала при загрузке?

Question

[fggavrilov]

Есть сайт в виде статьи: картинка, текст, картинка, текст и тд.
Ширина картинок задана в процентах, высота - авто.

При первой загрузке сайта, пока полностью не подгрузились картинки наблюдаем классические "скачки" и "прыжки" блоков, текста и тд.

Как решается эта проблема в 2021-ом году?

Comments

[Ankhena]

Если размеры зависят от исходного размера (или пропорций) картинок, то:
Начальные размеры задаются атрибутами width и height.
Тогда, браузер забронирует это место, пока не подгрузятся сами картинки и стили.

Answer 1

[WapSter]

Заранее задавать картинкам размер, можно при помощи css.

Comments

[fggavrilov]

Задать высоту формулой через пропорции картинки?

[WapSter]

fggavrilov, зачем? Просто задай высоту и всё

[fggavrilov]

WapSter, я же пишу, что у меня адаптивные под ширину окна картинки. Ширина строго в процентах. Высота зависит от ширины.

[fggavrilov]

WapSter, да, нужно указать размеры картинки в пикселях, а потом переопределить на проценты. Тогда место вычислится и забронируется. Не знал об этом.

[WapSter]

fggavrilov, я обычно просто применяю px и к картинке object-fit: cover и высоту регулирую медиа запросами, тогда вообще нет никаких скачков. Еще можно вставлять рыбу легковесную такого-же размера как нужная картинки и при помощи lazyload подгружаю нужную картинку.