Picture scaling in DIV's

[Sothpaw]

very weird.

i want a photo inside a div to scale to 25% of the page...
so i figure setting my div to 25% width would work.
nope, my image jumped to full size.
so i tried setting my div to no width and the picture to 25
nope, stretched the image full size again.
so... i did this

css
div.a {float: left; clear: left; width: 25%}

html
<div class="a">
<img width="100%" src="pic.jpg">
</div>

and it worked... to me that seems like unnecessary code for which CSS is supposed to get rid of.
am i doing something wrong?

[Robin_reala]

You'd probably want to do something like:

div { width: 25%; }
div img { width: 100%; }

or even drop the div entirely and just do:

img { width: 25%; }

Does that sound about right? You shouldn't have to float your container (although that'll trigger the float 'shrink wrap' model).

[edited by: Robin_reala at 6:34 pm (utc) on June 21, 2007]

[Sothpaw]

i need the float and the div because i have a second div to the right holding text.
i don't mind putting in the width for both... it just took me a while to figure it out and if thats the way it's supposed to work, then thats the way i'll code it.

[Robin_reala]

Ah, OK. Then yes, you'll need both. Percentage widths refer up to their parents, so here your 25% div refers to its parent, and the 100% image refers to the 25% div.

[Sothpaw]

thankyou,
the page is working just the way i want it to now.
understanding the percentage parenting thing helps too.
i'm a child of HTML tables so to me percentages were related to the entire page.
thanks,