javascript - 行高相对不变(基于其父div的大小)

Question

我已将行高设置为 20 像素，如下所示 line-height: 20px 。当我更改其父级 div 的大小时，我希望行高相应地改变。

在下面的示例中，您可以看到当我们更改 parent div 的大小时，line-height的<pre>标签不一样。尽管它是value永远不会改变。

function settextpos(){
        let top = ($("#video-div").outerHeight() * 10) / 200;
        let left = ($("#video-div").outerWidth() * 20) / 400;
        let size = ($("#video-div").outerWidth() * 15) / 400;
        $("#user_text").css("top", top);
        $("#user_text").css("left", left);
        $("#user_text").css("font-size", size);
}

function myFunction(){
    var x = document.getElementById("mySelect").value;
    let temp_scal = x / 100;
    $("#video-div").css("height", 200 * temp_scal);
    $("#video-div").css("width", 400 * temp_scal);
    $("#main-video-div").css("height", 200 * temp_scal);
    $("#main-video-div").css("width", 400 * temp_scal);
    settextpos();
}

.video-div {
  margin: auto;
  overflow: hidden;
  width:400px;
  height:200px;
  background:#0095ff;
  position: relative;
}

#user_text {
  font-size: 15px;
  position: absolute;
  top:10px;
  left:10px;
  font-weight: 500;
  color: black;
  word-break: break-word;
  text-align: center;
  width: max-content;
  padding: 0 4px;
  overflow: hidden;
  line-height:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <select id="mySelect" onchange="myFunction()">
  <option value="10">10%
  <option value="25">25%
  <option value="50">50%
  <option value="75">75%
  <option value="100">100%
  <option value="125">125%
  <option value="150">150%
  <option value="175">175%
  <option value="200">200%
</select>
<div id="main-video-div" style="margin: auto;">
    <div id="video-div" class="video-div shadow">
        <pre id="user_text">
            This is demo Text.
            This is demo Text.
         </pre>
     </div>
 </div>

Answer 1

无单位值:将此数字相乘 通过元素的字体大小

line-height: 1.5;

因此，它将是元素字体大小的 150%，并且如果您增加字体大小，它也会增加，但使用 px 时，即使您增加元素的字体大小，行高也将保持 30px。