Why you see out of proportion widgets in WordPress Website

Your blog cards look stretched or “dragged down.”

The image area is too tall. Text sits far below the thumbnail and you might have already figured out the LiteSpeed Plugin is actually be doing this, right?

You are correct! LiteSpeed Cache lazy-loading replaces images with placeholders.

LQIP and Responsive Placeholder guess the height.

If your card uses a different aspect ratio, the placeholder sets the wrong height. You get a tall gray box until the image loads.

Just to double check whether it is the plugin that’s doing this, follow these steps.

Fast diagnosis

Turn off Lazy Load in LiteSpeed Cache.

WordPress Admin → LiteSpeed Cache → Page Optimization → Media → Lazy Load Images → Off.

Hard refresh.

If cards look normal, the lazy-load placeholder is the cause.

The Solution

Choose one path from the following fixes. Start with Option A. Add CSS in Option C as a guard.

Exclude the blog grid from lazy-load

Method 1. Plugin exclude

LiteSpeed Cache → Page Optimization → Media

Lazy Load Image Excludes: add the CSS selector used by your grid thumbnails, for example.

.blog-cards img
.post-card img
.card-media img

Save.

Purge All in LiteSpeed Cache.

Hard refresh.

Method 2. Markup exclude

Add one of these to each image or to the block wrapper for the blog grid:

• class="skip-lazy"
• data-no-lazy="1"

Gutenberg

• Select the block.
• Advanced → Additional CSS Class → skip-lazy.

Elementor

• Image widget → Advanced → CSS Classes → skip-lazy.

Keep lazy-load, tame the placeholder

• LiteSpeed Cache → Page Optimization → Media
  • Use LQIP: Off
  • Responsive Placeholder: Off
  • Add Missing Image Dimensions: On
• Save and Purge All.

Why this helps

• Disabling LQIP removes the tall guessed placeholder.
• Enforcing width and height gives the browser the correct intrinsic ratio.

CSS guardrail to stop stretching

Add a fixed aspect ratio and cover fit on the card media. Adjust the ratio to match your design.

/* wrapper around the image */
.blog-cards .card-media {
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* the image itself */
.blog-cards .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

No aspect-ratio support on a legacy theme? Use a padding hack on the wrapper.

.blog-cards .card-media {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}
.blog-cards .card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Checklist that prevents regressions

Only one lazy-load system active. Turn off lazy-load in Jetpack, Elementor, or theme if LiteSpeed handles it.

Every image has width and height attributes or correct intrinsic sizes via srcset.

No inline CSS forces a fixed height on the image but not the wrapper.

Grid wrapper has a defined aspect ratio.

No duplicate placeholders from other plugins.

Cache order that matters

Purge LiteSpeed Cache → Purge All.

Purge Cloudflare cache.

Hard refresh in the browser.

Test in an incognito window.

How we set this up on client sites

Exclude only the above-the-fold hero and blog grids from lazy-load.

Disable LQIP and Responsive Placeholder for grids and cards.

Keep LiteSpeed lazy-load for long-form content images.

Enforce aspect ratios in CSS for all card media.

Validate in Lighthouse and check CLS and LCP.

Quick HTML examples

If you are hard coding the website then take a look at this example. Image excluded with a class.

<img class="skip-lazy" src="/uploads/post-thumb.jpg" alt="Post title" width="640" height="360">

Card structure

<article class="post-card">
  <div class="card-media">
    <img src="/uploads/post-thumb.jpg" alt="Post title" width="640" height="360">
  </div>
  <h3>Post title</h3>
</article>

Conclusion

You are probably here because you might have this issue and are looking for a solution or out of curiosity. Regardless if this article helped you in anyway don’t forget to share this with your friends.

In a nutshell, The stretch comes from LiteSpeed’s lazy-load placeholders. Exclude the blog grid or disable LQIP and Responsive Placeholder. Add a fixed aspect ratio and object-fit: cover. Purge caches and retest should fix this issue.

If you are a small business or a large enterprise with a high-performing website, you’ll generate more leads to grow your business. 

Yes, we’ve heard all the reasons why some think they don’t need a website such as: people see my billboard, or I get some referrals from friends and family or I belong to a networking group or I’m just too busy to think about it.

We always say “You can count the referrals you get, but you can’t count the ones you don’t know you could have got.” Use every channel possible or double down on the biggest regardless a website is one of the most important marketing tools for any business.

If you dont have the time to sit down and fix these issues you need a web design agency in Sri Lanka.

FAQ

Why not leave LQIP on?
It looks nice in long reads, but cards use strict ratios. LQIP often guesses the wrong height for a grid.

Will this hurt performance?
No. You are excluding only a small set of images. Lazy-load stays on for the rest. CLS improves. LCP often improves for cards with proper sizing.

Do I need both exclude and CSS?
Use the exclude first. Keep the CSS guard. It protects you from future layout changes.