Как сделать что бы картинки не прыгали?

Question

[webe]

Есть список товаров (картинка, цена и название)
Сетка с товарами адаптивная по 4 шт в ряд через calc(100% / 4)
У картинок width:100%
никаких min-height у меня нет, потому что я не могу знать заранее высоту, она всегда меняется.
Фиксировать высоту картинок я не могу, потому что заранее не знаю какой будет размер, высота подстаривается сама, на основе ширины.

Проблема:
Пользователь заходит на сайти у него грузится 20 картинок,
Высотка блока с картинкой изначально 0px
И блоки как бы сплюснуты.
Но как картинка подгружается, блок обретает нормальую высотку и происходит эффект "Подергивания"

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

Comments

[Yevhenii K]

Использовать transition?

[Максим Тимофеев]

Женя К, Вот только с height auto transition не сработает.

[Ankhena]

через calc(100% / 4)

А самостоятельно 100 на 4 не поделить? Надо, чтобы браузер при загрузке каждой страницы считал?

[webe]

Ankhena, вручную писать 25% ? так что это изменит?

[Ankhena]

webe, для прыганья картинки ничего не изменит, но хоть выглядеть по дурацки не будет. Ладно бы еще не делилось...

От прыганья избавит заставка пока не загрузятся все картинки или получение их размеров и подстановка в код в атрибуты. Возможно еще уменьшение веса картинок, чересстрочная развёртка. Но это не уберет скачки совсем, а лишь увеличит количество пользователей, которые их не заметят.

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

Нельзя, так нельзя.

[webe]

Ankhena, там еще отступы расчитываются:
width: calc((100% / 2) - 20px);
Я раньше высчитывал вручную, получался полный бородак как раз таки, сейчас более менее смотрится)

Попробую через заставку .

[Ankhena]

webe, хотите сказать, что если написать width: calc((100% / 2) - 20px); будет ровно, а если width: calc(50% - 20px), то криво?

Answer 1

[Максим Тимофеев]

Цепляемся за событие загрузки фото и анимируем. Есть правда проблема с анимацией height: auto, но есть волшебный поджопник:
https://jsfiddle.net/wokster/d32yeeze/

Answer 2

[Kalombyr]

По-моему стоит тогда средствами cms в вёрстку выводить ширину.

Comments

[Максим Тимофеев]

При чем тут ширина, если проблема с высотой? И если cms не знает размеров картинки? Или cms нет вовсе? Да и вообще шаблон зависимый от cms не кошерно.