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

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="开发者_如何学Gotext-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>

---

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).

---

I will address a minor issue that Piontek Media did not address. If you want the image is centered like in the example, you need the below because it cannot be inside the image block.

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

#zombiecontainer {
text-align:center;
}
</style>

If you can do it more succinctly, please, let me know.