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

Tags

Comments (6)

  1. It’s a nice tip, but weird that you’re specifically calling it a “WordPress tip”, when this works with all HTML / CSS. You’re not telling WordPress to limit the width of the image, but rather the browser. This little tip is also very useful when implementing a fluid or even a responsive layout to ensure that images also look decent on Mobile screens, etc.

    • Hi, Simon. That’s true, but as we’re WP focused, we try to take a WP slant. Also, of course, the bit about where to add the CSS in the WP back end makes it a little more specific for anyone who is looking specifically to solve this issue in WP.

  2. Joe, this is helpful for appearances, but not much else. The huge images still load (and add to page load time), they’re just constrained. I like to use NextGen’s auto-resize on upload feature, but wish that it was a standard WordPress feature.

Participate