A quick test shows that this:
<img class="test" src="testimage.jpg" />
combined with:
img.test { width: 50%; }
Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:
img.test { height: 50%; }
In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.
EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.
Think of it this way:
- body is 100% of window size.
- img is 50% of body.
- img is 50% of window size.
Now suppose I add a div. like this...
<div class="imgbox" style="width: 100px;">
<img class="test" src="testimage.jpg" />
</div>
Then
- body is 100% of window size.
- div is 100px, ignoring body width.
- img is 50% of div.
- img is 50px, regardless of window size.
If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.