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.

 

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 :

example image
Author's gravatar

Md. Mahbubur Rahman

13 thoughts on “Auto Resize Large Images in Blog Post

    Author's gravatar

    Actually it didn’t work when I used ID, but when I changed to Class it worked like a charm. I’m using Blogger.

    Big thanks, very useful :)

    Author's gravatar

    I’m using blogger with Firefox 3.6.13.
    This code can’t work :(
    Help me please……

    Author's gravatar

    Can you give me your URL where it’s not working ? May be i can help using firebug !

    Author's gravatar

    Really useful solution, Thanks :)

    Author's gravatar

    thank u man i had that problem.. many thanks

    Author's gravatar

    i have tried many ways but this is the best, the easiest … thank u man

    Author's gravatar

    This is useful. One of the techniques that work, correctly.

    Author's gravatar

    Thanks my friend. I’ve finally found the code which is I’ve always searched. Thanks again…

Your email address will not be published. Required fields are marked *