Auto-Resize Large Images in Wordpress

I was looking for an easy way to automatically resize the images in the blog posts, so that large images won’t break the Wordpress theme. A few plugins are available, but most of them are either outdated or with lots of other functionalities which I do not need.

Finally I stumbled upon a blog entry describing an easy way of doing it with a single stylesheet edit. So, this what you need to do to get it done.

1. Open your Wordpress theme’s Style sheet file in a text editor like notepad ( or use your webhost’s online editor). The file is located in your theme’s folder: /wp-content/themes/<your theme>/style.css
2. Search for img in this file to get your post content wrapper’s image settings. It looks like the following in my case.

.postContent img {
margin: 10px;
border: 3px solid #CCC;
}

3. Append the following content to it. Specify the size you require in pixels. I used the value 500.

max-width: 500px;
width: expression(this.width > 500 ? 500: true);

4. The resulting code is quoted below.

.postContent img {
margin: 10px;
border: 3px solid #CCC;
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
}

5. Save the file and Refresh your blog page with a high resolution image.

Bingo!! We are done

Related Articles: