将填充从像素转换为百分比答案

【问题标题】：convert padding from pixels to percentage将填充从像素转换为百分比
【发布时间】：2014-04-13 10:17:18
【问题描述】：

我一直在现有线程中寻找解决方案，但没有任何东西适用于我的具体情况。

我在相对定位的 div 中有一个绝对定位的超链接。填充和边距是用像素定义的，但我想用百分比重新定义它们。

例如，这个：

<a id="original" href="www.google.com" style="display: inline-block; position:absolute; left: 150px; top: 300px; padding: 100px 100px;" />

变成这样：

<a id="inserted" href="www.google.com" style="display: inline-block; position: absolute; left: 18.38235294117647%; top: 28.40909090909091%; padding: 9.469696969696969% 12.254901960784313%;"></a>

This jsfiddle example 显示了我想要实现的目标。但是您会注意到转换后的填充的大小（高度）没有原始链接那么大。

希望我的描述足够清楚。否则，请告诉我 ;)

【问题讨论】：

您知道以百分比形式给出的 padding-top/-bottom 是根据元素的 width 计算其值的，不是吗……？
我显然不是 :) 这对我来说似乎很奇怪。

标签： javascript html css position padding

【解决方案1】：

当您以百分比指定填充时，它的参考是宽度而不是高度。所以你必须将值指定为

a.style.padding = aWidth / 816 * 100 + "%" +
                  aWidth / 816 * 100 + "% ";

Click here for modified Sample code

可以找到解决方法Here

【讨论】：

这对我来说似乎很奇怪，但它正在工作！当我确认此解决方案适用于所有情况时，我会接受。我想在保持正确位置的同时缩放 div。