Image auto-resize function?

Question

Hi there,

Is there any way to make images in answers auto-resized to fit with the default width of content.

Recently, I've found that when a member inserts large-size pictures in his post, those overlapped and hid the side-panel's contents:

http://chatscience.net/19/heterocyclic-chemistry-exercise

Therefore, I would like to know if there is way to make such images auto fitted.

Best regards.

Answer 1

use css styles:

.entry-content img { max-width: 600px; border:1px solid #AAAAAA; }

credit to NoahY

 

The border is defined here, in case you link the images (gives thick blue border in IE).

Answer 2

You'd be better of with timthumb instead of using css. What if someone enters a gigantic image that's like 10 mb or so? It sure will be 'resized' by css, but it still will take a long time before the image is shown...

Comments

you could just limit the size of image uploads to <1mb

Answer 3

I'm doing this on my site using jQuery on page load and some preprocessing on the backend when the content is posted. I am creating both a thumbnail and a local copy of the image. The thumbs are used by the image slider at the top of each category.

You can just do the resize with pure jQuery. Just use $.css() or $.attr(). The problem is getting the images original dimensions. 

Here is an example post with a resized image from a few minutes ago.

example