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.
-
- 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
- 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.