Resize image proportionally with CSS?

Question

Is there a way to resize (scale down) images proportionally using ONLY CSS?

I'm doing the JavaScript way, but just trying to see if this is possible with CSS.

Answer 1

<img style='width: 50%;' src="..." />

worked just fine for me ... Or am I missing something?

Edit: But see Shawn's caveat about accidentally upsizing.

Answer 2

The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.

Answer 3

Ethan Marcotte recently investigated this issue very thoroughly. The short answer is yes, it's possible, but not in all browsers.

Answer 4

To resize the image proportionally using CSS I tried following.

img.resize{
    width:540px; /* you can use % */
    height: auto;
}