Auto-resize posted images in a Wordpress-powered blog

This is so simple. I just could not believe that it could be this simple. No complex coding. No javascripting.

Just a piece of CSS code.

I have been trying to automatically resize images posted in a Wordpress powered blog. What I first thought was - it would need a script that would detect and determine the size of the posted image. Based on that, if the image is larger than the required width size (in pixel), it would then automatically resize the image in the specified required size to fit in the post/story column of the Wordpress theme.

I Googled. And came across this and that tips and trick to solve the solution. But none works. I even tried playing around with Chris Messin's WP-Imagefit wordpress plugin. But it could not help me much with the theme to which I was trying to implement. What WP-Imagefit also does is that it proportionally resizes images to fit your blog template -- same as the trick I was hunting around. The drawback? WP-Imagefit plugin is currently compatible only with themes like K2 or Sandbox. The theme I am working with is neither K2 nor is it Sandbox.

Back on the prowl right off, I tried changing the posted story images with CSS's width property. It did not work. Though it does resized images but it works only with images that are larger than the required image size. The drawback to this was that images smaller than the specified required image size were also resized accordingly. I didn't want that either. I wanted those smaller images sizes unchanged. Why? It looks odd and break up the image resolutions, blah blah.

Then CSS max-width property comes to the rescue. And it finally works the way I wanted it to. It didn't resize smaller images. It resize only larger images which are larger than the specified required image size. Here is the CSS code for your Wordpress style.css.

.storycontent img {
max-width: 460px;
width: expression(this.width > 460 ? 460: true);
}


.storycontent: The story content class. Change accordingly.
img: For images found inside the .storycontent posted story
460px: Change this accordingly (or lesser probably) to the width size of your story content box.
width: expression(this.width > 460 ? 460: true); max-width fix for IE. Change the 460 to the appropriate size.

Now that I say is a really simple solution to an imagined big problem. No more manually specifying the dimensions of your posted images. *grins*

Tell me if this solution doesn't work. Or if there are any other workaround simpler and better than this.