HTML img scaling

I'm trying to display some large images with HTML img tags. At the moment they go off the edge of the screen; how can I scale them to stay within the browser window?

Or in the likely event that this is not possible, is it possible to at least say "display this image at 50% of its normal width and height"?

The width and height attributes distort the image -- as far as I can tell, this is because they refer to whatever attributes the container may end up with, which will be unrelated to the image. I can't specify pixels because I have to deal with a large collection of images each with a different pixel size. Max-width doesn't work.

Solution 1:

Only set the width or height, and it will scale the other automatically. And yes you can use a percentage.

The first part can be done, but requires JavaScript, so might not work for all users.

Solution 2:

CSS is enough:

img {
    width : desired_width;
    height: auto; /*to preserve the aspect ratio of the image*/
}