html - 在图像 HTML 上自动调整文本大小

Question

我想在图像上写 2 个数字，像这样:

_{(来源:imgsafe.org)}

所以，我用这段 CSS 代码完成了这个效果:

 #container {
  position: relative;

}
#image {
    height: 22%;
  position: relative;
   display: inline-block; 
  margin-top:3px;
  vertical-align: bottom;


}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 80px;
  font-weight: bold;
  font-family:nexa;
  left: 150px;
  top: -50px;
}
#textdx {
  position: absolute;
  color: #787d83;
  font-size: 80px;
  font-weight: bold;
  font-family:nexa;
  float:right;
  width:50%;
  right: 150px;
  top: -50px;
}

这是我的 HTML 代码:

<div id='container'>
<img id='image' src='imgA.png'></img>
<p id='text'>5</p>
<p id='textdx'>5</p>
</div>

<div id='container'>
<img id='image' src='imgB.png'></img>
<p id='text'>6</p>
<p id='textdx'>6</p>
</div>

问题是当我调整浏览器窗口大小或在具有不同屏幕尺寸的计算机上打开页面时，结果是:

_{(来源:imgsafe.org)}

我该如何解决这个问题？

Answer 1

为了解决这个问题，您必须使用位置的百分比值而不是固定像素值。您还必须使用 JavaScript 根据窗口的宽度调整文本字体大小(在我的示例中我选择窗口作为引用)。这是我的示例代码(我已经下载并使用了您的第一张图片):

html:

    <div class='container'>
      <div class="inner-container">
        <img class='image' src='img/imgA.png'></img>
        <p class='num text'>5</p>
        <p class='num textdx'>5</p>
      </div>
    </div>

CSS:

   <style>
    .container {
      display: inline-block;
      position: relative;
      width: 50%;
    }

    .image {
      width: 100%;
    }

    .text {
      position: absolute;
      margin: 0px;
      top: 7%;
      left: 23%;
    }

    .textdx {
      position: absolute;
      margin: 0px;
      top: 39%;
      left: 76%;
    }

    .num {
      font-size: 70px;
    }
  </style>

js:

    <script>
      var windowInitWidth = window.innerWidth;
      var nums = document.getElementsByClassName('num');

      // get the value of num font-size
      var numFontSize = window.getComputedStyle(nums[0]).getPropertyValue("font-size");
      numFontSize = Number(numFontSize.replace("px", ""));

      console.log(numFontSize);

      // update the text font-size when resizing the window
      window.addEventListener("resize", function() {
        for( var i = 0; i < nums.length; i++) {
          nums[i].style.fontSize = (window.innerWidth / windowInitWidth * numFontSize) + 'px';
          console.log(nums[i].style.fontSize)
        }
      })
    </script>