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
Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more
If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more
It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more
Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more
Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more
Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more
No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more
Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more
To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more
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.
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.
Ed – very true. It doesn’t actually reduce the file size.
Now, next tip (for tomorrow)? A plugin that automatically resizes large images (with an option to NOT resize as a non default choice) upon media upload? :)
It’s work ,thank you