Относительный размер изображения с блоком div и без <img src="url" width="xy%" height="za%">?

Question

Я не имею в виду изменение размера с помощью <img src="URL" width="Xy%" height="za%">, хотя его внешний вид совпадает с моей целью. Я хочу что-то вроде кода зомби-собаки здесь , но с изображениями произвольного размера. Пожалуйста, прочитайте комментарии в моем коде.

<?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

Не совсем уверен, что я понимаю ваш вопрос, но сработает ли это?

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

Это установит высоту и ширину любого изображения в элементе div zombiecontainer на любые значения, которые вы определите (в данном случае 50%див).

Answer 2

Я расскажу о незначительной проблеме, которую Piontek Media не рассмотрела.Если вы хотите, чтобы изображение было центрировано, как в примере, вам нужно следующее, потому что оно не может быть внутри блока изображения.

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

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

Если вы можете сделать это более кратко, пожалуйста, дайте мне знать.*