Setting proportional image widths for browser resize

Question

If I have an image combined with a style:

<img class="test" src="testimage.jpg" />

img.test { width: 50%;}

The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.

This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?

Answer 1

No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.

Answer 2

You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).

Another way to do it would be to use JavaScript to calculate and resize the image dynamically.

Answer 3

I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.

Answer 4

Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D