How to Automatically Resize Very Large Images in WordPress

Do you ever have the problem of having images that are so big they run into your sidebar and make your site look as if it’s been hit by a hurricane?

Maybe you know enough to control the size of images, but what if you have users who don’t?

A good theme should take care of this problem for you. Unfortunately, some don’t – even some you pay a pretty penny for.


The Solution – Automatically Limit Max Width of Images in WordPress

Just put this into the bottom of your style.css file. (Appearance >> Stylesheet: style.css) Or even better, put it into a custom.css file – this way it won’t get overwritten if you update your theme.

img {max-width:98%; height: auto;}

This tells WordPress to make the maximum width of the image 98% of the space available in your content area. (Of course you can change this to whatever percentage you’d like.) It then tells WordPress to adjust the height of the image and keep the original aspect ratio. This way you don’t get stretched out images.

The Result – Before and After

This first screen shot is of a very large image in a blog post. No, this is not a background for the entire blog. It’s an image so large that it only looks like a background.

Now here’s the blog after adding the one line of CSS styling.


Photo: Woman After Diet from BigStock