Search code examples
htmlcssautoresize

Setting proportional image widths for browser resize

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?

Solution

  • 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.