Auto Resize Large Images in Blog Post

I ran into this problem recently and found a good fix. As we make custom CMS, blogs as parts of websites, we frequently use some WYSIWYG editors like TINYMCE. Now when you enable people to post contents along with image urls, people may enter an image url which possibly is much larger than the available width we have in the page layout. Perhaps most of the images may become larger as we would only get around 650px of width when we are using 960px standard layout with some sort of sidebars.

So the user’s posted image in the blog post may overflow the layout. What to do then ??

1. We want to keep the image within the available width (may be 600px).

2. We also want to keep the aspect ratio intact so that the dimension doesn’t get messed up.

After googling in some pages I had to combine the CSS solution which works for most of the modern browsers (certainly not IE6).

So here’s the neat solution totally in CSS.

#post_view img {

max-width: 620px;

height: auto !important;

width: expression(this.width > 620 ? 620: true);

}

The above snippet assumes that your ID for the container (i.e DIV) is post_view. I’d discourage using class here because ID has a higher order of preference when it comes to override CSS rules.

So, all the image who exceeds the width of 620px will be automatically resized to 620px. Images below 620px will not be affected at all. The height: auto !important; will keep the aspect ratio of the image to the original ratio.

Compatibility:

Firefox 3

Opera 10

IE 7 (I don’t care if it works in IE 6 or not)

Chrome

Safari 4 (win) [ Don't know about Mac cuz i don't have any ]

EXAMPLE :