Relative size of an image with div block and without <img src="url" width="xy%" height="za%">?

Question

I don't mean the resize using <img src="URL" width="Xy%" height="za%">, despite its look is the same with my goal. I want something like in the zombie-dog code here but with arbitrary-sized images. Please, read the comments in my code.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="" />

<Content type="html">
<![CDATA[

// This won't change the size of the image but the size of div.

<style type="text/css">
#zombiecontainer{
height:100%;
width:100%;
}
</style>

// I want to specify the size of the image with Div -block relative to the size
// of iGoogle gadget.

<div id="zombiecontainer"
style="text-align:center;" width="100%" height="100%">
</div>


<script type="text/javascript">
var images = new Array();
images[0] = _IG_GetImage("https://pictures/friends.jpg");

// How can I do it with the div? I don't want to create a static picture
// and put the code to the div block. I want to be able to change it,
// hopefully, with below commands. No more messy HTML.

_gel("zombiecontainer").innerHTML = "";
_gel("zombiecontainer").appendChild(images[0]);

</script>
</div>
]]>
</Content>
</Module>

Answer 1

Not quite sure I understand your question, but will this work?

<style type="text/css">
#zombiecontainer img{
height:50%;
width:50%;
}
</style>

This will set the height and width of any image in the zombiecontainer div to whatever values you define (in this case 50% of the div).