DEV Community

Cover image for Images Cropped and Half Loading Issue on Website
Devjoe
Devjoe

Posted on

Images Cropped and Half Loading Issue on Website

Image description

Hi everyone,

I'm currently facing an issue on my website "https://spiritualgleam.com" where some images are either cropped or only half-loading. This happens randomly on different pages, and I haven't been able to pinpoint the exact cause.

After inspecting the site, I noticed that it might be related to how the CSS or HTML handles the image dimensions and loading behavior. Here's a brief snippet of the image code I'm using:

Image description

I'm using object-fit: cover to ensure images maintain aspect ratio, but it seems like this may be causing some images to appear cropped. Additionally, I suspect the loading="lazy" attribute could be contributing to the half-loading issue, especially if the images aren’t fully loaded before the user scrolls past them.

Has anyone else experienced a similar issue? Could this be related to lazy loading or a different problem with how images are rendered? Any suggestions on how to resolve this would be greatly appreciated!

Top comments (0)