Fixed CSS element resizes/scales to browser

Question

there is probably a very simple answer to this very simple question, but i just can't to seem to find it, and its driving me crazy. what I have is a div element at the bottom right corner of the window with an image in it approx. 260 x 300 px. my css code is this:

#doomdiamond{
 position:absolute;
 right:50px;
 bottom:50px;
}

and html is this

<div id="doomdiamond">
  <img src="doomdiamond.gif" />
</div>

all pretty simple. the element shows up with the image inside of it at the proper distance from the browser window. but what i really want it to do is scale/resize itself proportionally when the browser is resized, instead of staying the same size.

this is possible right?

Answer 1

I have created an example for you showing an image that sits in the lower-right corner, with the size based on the width of the window.

It works by setting the image width to a percent value. Percentages are based on the containing parent; because I did not cause the #doomdiamond div to be absolutely placed, it is not the positioned parent of the object.

Setting only the width or height of an img element causes the image to be proportionately scaled.

P.S. This uses no JavaScript :p