Auto-resize large images with JavaScript?

Question

I have an application that allows people to post images on each others profiles with bb code. Problem is, some post very large images, which cover other parts of the site when are viewed.

How can I scale down images, client-side, so they are no bigger than x by y dimensions?

EDIT. These are myspace profile style images.... that people post with [img] tags. They are not uploaded or stored on the site itself.

Answer 1

Scale them down in the server side instead. I guess that you store it there anyhow. Storing it there will reduce the amount of data passed from the server to the clients. If you store the large images, a lot of unnecessary data will be sent to the client in each request which is slower.

If you really want to do it on the client side I guess CSS will resize it for you.

EDIT: Try below, saw it used on another forum, works in IE and should work in most browsers: With css, set the img to have:

width: 590 px;

and the div sorrounding it:

max-width: 590 px;

Answer 2

It would be far better to resize the images on website upload. This way you can enforce a maximum size that will be most appropriate for your site.

If you depend on rendering the image and then adjusting its size you will have a flickering effect as the image is shown at full size, and then scaled down smaller.

Another option is to put the image being displayed inside a div with a set size and overflow: hidden.

Answer 3

CSS:

#post img {
    max-height: 1000px;
    max-width: 500px;
}