3 years ago

Category: PHP, javascript

When you are working with images on your website, the issue of the https://web.dev/optimize-cls/ that comes with it is real and pretty annoying at times. As you can tell, when the images are not handled correctly, the content that lies beneath the image will appear first and then shifts below as the image starts loading.

Next, we need to set the position of this image-container as relative and the position of the image as absolute.

.image-container { position: relative; img { width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }}

Instead, it will show the nice background color of your choice in place of the image when the image hasn’t started loading yet!