JavaScript支持百分比单位吗？

我正在尝试根据不同的浏览器大小重新调整图像大小。我使用此代码：JavaScript支持百分比单位吗？

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5;

但如果我不使用DOCTYPE，如果我在HTML文件中使用DOCTYPE，那么这是行不通的作品。有人说：

在使用有效的DTD属性值必须有单位...

于是，我就加个单元％：

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "%";

，但它不” t工作，它只能与px单位代替：

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "px";

如何使％单位工作，因为它与px单位？这甚至有可能吗？

来源

2012-02-28 XO39

如果你正在服用的身体的clientHeight，其结果是在像素（PX）。如果你乘以0.5，结果是像素数量的一半。你为什么要把这个数字变成一个百分比？ – Travesty3 2012-02-28 17:24:52

@ Travesty3：我并不是真的想将* px *变成百分比*％*，我只想将图像大小设置为窗口大小的50％。 – XO39 2012-02-28 17:33:37

你的代码的最后一点应该可以做到这一点。到目前为止，我使用的最简单的方法是使用'document.documentElement.clientHeight'，这已经证明是我最好的跨浏览器兼容的检查方法。请记住，如果身体长于窗口（使用滚动条），您的解决方案可能无法按预期工作。 – Travesty3 2012-02-28 17:44:19

这是一个似乎已经工作了OP的解决方案：

document.getElementById("myImg").style.height = document.documentElement.clientHeight * 0.5 +"px";

来源

2012-02-28 17:23:12 Travesty3

在这种情况下，JavaScript支持...字符串。

您的问题几乎肯定会降至what height: 50% (for some value of 50) means。

指定百分比高度。百分比是根据生成的包含框的块的高度来计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素没有被绝对定位，则该值计算为'auto'。根元素上的百分比高度与初始包含块相关。

如果父元素的height解析为height: auto那么任何百分比高度也将解析为auto。

如果您想要应用百分比高度，则需要将父元素的height设置为其他值。如果将它设置为百分比，那么您需要设置祖父母的身高，等等（直到您点击视口，该视口被认为具有像素高度）。

这就是说，得到了主体的高度以像素为单位，该减半，那么粘附在端部的%听起来像被制作非常奇怪的计算。

如果浏览器高100px，那么元素将是50％。

如果浏览器高300px，那么元素将是100％。

来源

2012-02-28 17:22:38 Quentin

非常感谢昆汀。正如我在上面对Travesty3的评论中提到的，我只想将图像的大小设置为窗口宽度和高度的50％。 – XO39 2012-02-28 17:36:32

JavaScript支持百分比单位吗？

回答

相关问题