My images are messed up in WordPress 5.9

OVERVIEW

If you use a non-Gutenberg theme, your images might be messed up after you updated to WordPress 5.9.0. The reason this happened is because WordPress 5.9.0 added the following bit of CSS to your web site…

html :where(img) {
    height: auto;
    max-width: 100%;
}

This CSS is applied to all images on your web site, whether you want it or not. WordPress should not automatically apply such broad CSS to the front end of your web site. The one saving grace of this code snippet is that the :where( ) pseudo-class function has a CSS specificity of zero.  Which means overriding this CSS rule is easy to do.

This issue is being hashed out on WordPress BugTrac, and on GitHub WordPress Issues. It looks like this may be fixed in WordPress 5.9.3, or possibly WordPress 6.0.

HOW TO FIX IT, FOR NOW

WordPress should fix this issue in an upcoming release. Until then, you can add the following CSS to your theme to override it…

html :where(img) {
    max-width: fit-content;
}

Additional CSSThe easiest place to do this for your non-Gutenberg theme would be in the theme Customizer. Use the Appearance >> Customize menu, then click on Additional CSS. Add the CSS fix shown above, and click the Publish button.


FIX IT IN PHP USING FUNCTIONS.PHP

WordPress really wants you to use Gutenberg themes; no mater how happy you are with your old theme. This means more possible incidences of unwanted Gutenberg CSS injected in your web site injected. Having a bunch of Gutenberg CSS loading in your non-Gutenberg theme is unnecessary. It lowers the performance of your web site; causing web browsers to download more files and waste more time parsing CSS. Worse of all, as you have seen, these unwanted CSS files could mess up the formatting of your web site.

To deal this this, the following code will dequeue the WordPress Gutenberg related CSS files, and help speed up your web site load time. Add this code to your theme’s functions.php file…

/**
 * Dequeue Gutenberg Block styles.
 */
add_action( 'wp_enqueue_scripts', function () {
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
	wp_dequeue_style( 'wc-block-style' );
}, PHP_INT_MAX );