带有 div 块且不带 <img src="url" width="xy%" height="za%"> 的图像的相对大小？答案

【问题标题】：Relative size of an image with div block and without <img src="url" width="xy%" height="za%">?带有 div 块且不带 <img src="url" width="xy%" height="za%"> 的图像的相对大小？
【发布时间】：2010-12-23 00:34:14
【问题描述】：

我的意思不是使用<img src="URL" width="Xy%" height="za%"> 调整大小，尽管它的外观与我的目标相同。我想要类似僵尸狗代码here 的东西，但图像大小任意。请阅读我代码中的 cmets。

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

【问题讨论】：

<img width> 和 <img height> 只接受无单位值；您只能在 CSS 属性中使用统一值。

标签： html css igoogle

【解决方案1】：

不太确定我是否理解您的问题，但这会起作用吗？

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

这会将僵尸容器 div 中任何图像的高度和宽度设置为您定义的任何值（在本例中为 div 的 50%）。

【讨论】：

请注意，这将拉伸图像而不是缩放；您可能希望只使用宽度和高度中的一个，我认为另一个会相应地缩放。或者在#zombiecontainer 中使用background-image 和background-stretch 等设置。
如果我错了，请纠正我，但这会缩放图像，而不是拉伸它。它将高度和宽度都缩放 50%，而如果使用像素值而不是百分比，它会拉伸它，而不是缩放。

【解决方案2】：

我将解决一个 Piontek Media 没有解决的小问题。如果您希望图像像示例中那样居中，则需要以下内容，因为它不能位于图像块内。

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

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

如果你能做得更简洁，请告诉我。

【讨论】：