PDA

View Full Version : sizing div by %



robkin
Jul 21st, 2009, 04:27 AM
Hi there. I'm having some trouble with setting the height of a div to a % and was hoping somebody could help. Here's the situation:

I have an image in a div.

The height of the div is set to be 20% of the screen / parent div. The width is not set at all.

The height of the image is set to be 100% of the div. The width is not set at all.

As the size of the browser window changes, the image scales correctly and maintains its proportions. The width of the div, however, remains at the width of the original image, thereby either creating too much of a gap between the image and the content to its right (if the image has been shrunk), or pushing the image on top of the content to its right (if it's been enlarged). How do I make the div maintain its original proportions as its height changes, essentially moving the content to the right of it farther right as the screen's height increases?

HTML:
<div id="drawing">
<img src="5.jpg" height=100%>
</div>

CSS:
#drawing {
background: #00ff00;
height: 20%;
float: left;
}

robkin
Jul 21st, 2009, 04:31 AM
i'm also interested in figuring out how to superimpose an image map over a div set to a % size. I tried doing it, but the map kept its coordinates as the image's size changed. I suppose I could write a javascript to multiply each coordinate of the map by the % change in size, but this seems like a pain. Is there an easier way to do this?