CODEWITHSUNDEEP
htmlsasslighthousecumulative-layout-shift
RabaukeHauke
RabaukeHauke

Reputation: 29

Can I fix Cumulative Layout Shift without knowing the width and height of an Image?

I tried aspect-ratio and the padding-top trick, but is there a way to automate all of this?

Upvotes: 2

Views: 2652

Answers (1)

lucian
lucian

Reputation: 681

I'll assume you don't control the documents (to set explicit heights/widths), the resources (to speed things up with progressive jpgs) or the server (to use http2 push or add explicit http headers) and you want to do this stricly with css.

Unless I'm missing something, it can't be done with precision.

What you could do is to reduce the amplitude of the CLS by setting a min-height on the image wrapper element, at the minimum of possible outcomes. This way, the CLS will be for the difference only, not for the whole height.

It can be done either:

A - easy - If you know that no picture will be less than so many pixels high*, not ser, you'd set a min-height on the wrapper equal to that number of pixels.

*(pixels in actual display, not those of the original file, the figures may match or not depening on your implementation)

B - mildly-complex - If you know that no picture will have an aspect ratio less than sometheing, you'd set a min-height in vw, where the exact value is the result of a specific calculation** for each media query.

**(for example, a 2/1 or bigger image - such as 1000x500px - will sit safely in a min-height="50vw" wrapper if it's on a full-width column or in a min-height="25vw" wrapper if on a half-width column and so on)

Upvotes: 0

Related Questions