0

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?

Phrogz
  • 296,393
  • 112
  • 651
  • 745
nathan
  • 3
  • 1
  • 2

2 Answers2

2

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

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • COOL. thank you! looks like it works perfectly in safari, but not so much in chrome (the image doesnt stay fixed 20px from the bottom when the window is resized) any suggestions? thanks again – nathan Dec 16 '10 at 23:30
0

Yes it is possible, you will need some JavaScript to do it though. Are you using any JS frameworks ?

UPDATE

Looks like resize div and its content on browser window resize is what you're looking for

Community
  • 1
  • 1
sjobe
  • 2,817
  • 3
  • 24
  • 32
  • I have a separate javascript function for a crossfading bg that i have – nathan Dec 16 '10 at 23:16
  • as well as a fade in /out function for the element as well. – nathan Dec 16 '10 at 23:17
  • yes there is a in my head but im not too familiar with what it does. im definitely new at htis – nathan Dec 16 '10 at 23:20
  • It means that you're using the jQuery library. If you're new at this, I suggest you use a plugin that does something similar instead of writing it on your own. Are you looking for something like this http://designshack.co.uk/articles/javascript/effortless-full-screen-background-images-with-jquery ? – sjobe Dec 16 '10 at 23:22
  • yes but not a background image. i want the element/image within the element to scale/size when the browser is resized – nathan Dec 16 '10 at 23:24
  • so when the window is resized, you want both the div and the image sizes to change ? – sjobe Dec 16 '10 at 23:25
  • yeah proportionally. and still keep it at a fixed location of 50px from the left and 50px from the bottom – nathan Dec 16 '10 at 23:26