How to Fix WordPress Images Displaying Too Big: Resolving the sizes=”auto” CSS Bug

Are your WordPress images suddenly displaying way too big? If you recently updated your website and noticed that your layout is broken by giant pictures, you are not alone. This frustrating issue is directly tied to the img:is([sizes="auto" i], [sizes^="auto," i]) CSS selector introduced in recent WordPress core updates.

In this guide, we will explain exactly why this WordPress image sizing bug occurs and provide simple, actionable steps to fix it.

BTW I prefer option (2) in the functions.php file 🙂

Why Are My WordPress Images Suddenly Huge?

Starting with WordPress 6.7, developers introduced a performance feature that automatically adds the sizes="auto" attribute to lazy-loaded images. While this update was designed to improve page loading speeds and Core Web Vitals, it inadvertently conflicts with the stylesheets of many popular themes.

The issue stems from how browsers handle the img:is([sizes="auto" i], [sizes^="auto," i]) CSS selector. If your active theme lacks explicit maximum width rules for these auto-sized images, the browser assumes it should render the image at its full original dimensions. As a result, images expand far beyond their containers, breaking your website’s layout.

How to Fix the WordPress sizes="auto" Image Bug

Fortunately, you can fix this layout-breaking issue in a few different ways. Choose the method that best fits your technical comfort level.

Method 1: Apply a Custom CSS Fix (Recommended for Beginners)

The fastest and safest way to reign in these giant images is by forcing a maximum width constraint using WordPress Custom CSS.

1. Log in to your WordPress admin dashboard.
2. Navigate to Appearance > Customize.
3. Click on the Additional CSS tab at the bottom of the menu.
4. Copy and paste the following CSS code block:

img:is([sizes="auto" i], [sizes^="auto," i]) {
    max-width: 100% !important;
    height: auto !important;
}

5. Click Publish to save your changes and check your live site.

Method 2: Disable the sizes="auto" Attribute via PHP

If the CSS fix doesn’t work, or if you prefer a server-side solution, you can completely disable the new sizes="auto" feature by adding a filter to your theme.

• Warning: Always back up your site or use a child theme before editing PHP files.

1. Go to Appearance > Theme File Editor (or use an FTP client).
2. Open your active theme’s functions.php file.
3. Add the following PHP snippet at the bottom of the file:

add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );

4. Click Update File to apply the changes.

Post-Fix Checklist

To ensure your images display correctly, follow these final steps:

• Clear your cache: Purge your caching plugins (like WP Rocket, W3 Total Cache, or LiteSpeed) and clear your browser cache.
• Update your theme: Theme developers are actively patching this bug. Check your dashboard for available theme updates.
• Test responsiveness: View your site on mobile and desktop devices to verify images are scaling normally.

By using either the CSS override or the PHP filter, your WordPress images will immediately return to their normal sizes, restoring your website’s professional design.