How to make pictures not jump?

Question

css

There is a list of products (picture, price and name)
Adaptive grid with 4 items in a row using calc(100% / 4)
Images width: 100%
I don’t have any min-height, because I can’t know the height in advance, it is always changing.
I can’t fix the height of the pictures, because I don’t know in advance what the size will be, the height is aged by itself, based on the width.
Problem: The
user visits the site and he loads 20 pictures, The
height of the block with the picture is initially 0px
And the blocks are kind of flattened.
But as the picture is loaded, the block acquires a normal height and the "Jerking" effect occurs,
how to get rid of this jamb?
I understand that if you set a fixed height, then everything would become normal, but in my adaptability this cannot be done.

Answer 1

We cling to the photo loading event and animate it. There is a real problem with the height: auto animation, but there is a magic trick:
https://jsfiddle.net/wokster/d32yeeze/

Answer 2

In my opinion, it’s worth then using cms to display the width in the layout.