Javascript 线条高度不小于'；t相对变化（基于其父div的大小）

我已将行高设置为20像素，如so

行高：20px

。当我更改其父级

div

的大小时，我希望行高度也相应地改变

在下面的示例中，您可以看到，当我们更改

父div的大小时，
的
行高度
line-height: 1.5;

.video div{
保证金：自动；
溢出：隐藏；
宽度：400px；
高度：200px；
背景：#0095ff；
位置：相对位置；
}
#用户文本{
字体大小：15px；
位置：绝对位置；
顶部：10px；
左：10px；
字号：500；
颜色：黑色；
断字：断字；
文本对齐：居中；
宽度：最大含量；
填充：0.4px；
溢出：隐藏；
线高：30px；
}

10%
25%
50%
75%
100%
125%
150%
175%
200%
这是演示文本。
这是演示文本。
无单位值：使用此数字乘以
按元素的字体大小

因此，它将是元素字体大小的150%，如果您增加字体大小，它将增加，但使用px时，即使您增加元素的字体大小，线条高度也将保持30px。
请参见此处，它正在工作。。我刚刚设置了
行高：1.5
，改为使用
px


函数settextpos（）{
设top=（$（“#video div”）.outerHeight（）*10）/200；
left=（$（“#video div”）.outerWidth（）*20）/400；
let size=（$（“#视频div”）.outerWidth（）*15）/400；
$（“#用户_文本”）.css（“顶部”，顶部）；
$（“#用户_文本”）.css（“左”，左）；
$（“#用户_文本”）.css（“字体大小”，大小）；
}
函数myFunction（）{
var x=document.getElementById（“mySelect”）.value；
让温度刻度=x/100；
$（“视频分割”）.css（“高度”，200*温度刻度）；
$（“视频分割”）.css（“宽度”，400*温度刻度）；
$（“主视频分区”）.css（“高度”，200*温度刻度）；
$（“主视频分区”）.css（“宽度”，400*温度刻度）；
settextpos（）；
}
.video div{
保证金：自动；
溢出：隐藏；
宽度：400px；
高度：200px；
背景：#0095ff；
位置：相对位置；
}
#用户文本{
字体大小：15px；
位置：绝对位置；
顶部：10px；
左：10px；
字号：500；
颜色：黑色；
断字：断字；
文本对齐：居中；
宽度：最大含量；
填充：0.4px；
溢出：隐藏；
线高：1.5；
}

10%
25%
50%
75%
100%
125%
150%
175%
200%
这是演示文本。
这是演示文本。
您使用的浏览器是什么？至少在Firefox和Chrome中，行的高度没有变化。忽略一个错误，即初始选择器值不代表应用于
#user_text
的缩放因子，更改缩放百分比不会更改行高-可以将其视为每行末尾的句点之间的垂直距离，并保持固定在
30px
。我使用的是
Firefox
，
Chrom
和
Safari
。这些都是我正在使用的浏览器。