Image jumps during page load object-fit: cover

Question

For example, here https://cs.daihatsu-club.net/vozidlo/daihatsu-materia-8 when I set Network throttling to Slow 3G in Chrome Developer Tools, you can see how the wedding photo loads and displays first by filling the 300x200px reserved for IMG at the expense of not keeping the aspect ratio (distorted) and only after a while displaying it cropped thanks to "object-fit: cover;". The bad image jumping effect you can see this in this few-second YouTube video https://youtu.be/CF3EB3CxHY4

Any idea how to prevent it while keeping image cropped by CSS "object-fit: cover"?

enter image description here

Answer 1

The issue doesn't seem to be related to CSS, but how Chrome v105 (also Edge v104) handles the image HTTP response from the server.

Since the image is status code 304, the image is retrieved from cache before the browser renders the object-fit style. Changing the image header response status code to 200 will prevent the caching and fix this jumping issue.