Auto-resize large images with JavaScript?

I have an application that allows people to post images on each others profiles with bb code. Problem is, some post very large images, whi开发者_运维问答ch 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.

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;

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.

CSS:

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