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.
- Append the following content to it. Specify the size you require in pixels. I used the value 500.
- The resulting code is quoted below.
- Save the file and Refresh your blog page with a high resolution image.
.postContent img {
margin: 10px;
border: 3px solid #CCC;
}
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
.postContent img {
margin: 10px;
border: 3px solid #CCC;
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
}
Bingo!! We are done
{ 8 comments… read them below or add one }
Great… I am surely gonna use it on my blog…
Thanks for the tip. I used it on wordpress 2.7 at it worked like a charm. I also used the same idea to control the height…this helped me with squished images
Awesome post mate. I was looking for this and came across your site. Thank you.
it didn’t worked.
@flippy07:
It should work in all standard wordpress themes. If your theme is is customized too much this fix won’t work. Check it in another theme and see if it’s working.
This worked at treat for my website, thanks alot.
what browsers is this working with?
works, but my pictures become warped so that the height and the width dont correspond…