Images Cropped and Half Loading Issue on Website

Devjoe - Sep 12 - - Dev Community

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!

.
Terabox Video Player