Question

我想在图像上写2个数字，就像那样：

like this

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

<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>

这是我的HTML代码：

City<-c("Toronto", "Toronto", "Montreal","Ottawa","Ottawa",
        "Hamilton","Peterborough","Toronto","Hamilton","Hamilton")

OnsetDate<-c("11/04/1980","04/08/2005","04/19/2015","07/10/2015","10/10/1999","03/11/2016","09/12/2011","06/10/2015","02/05/1988","08/08/2016")

Client<-c("Cl1","Cl2","Cl3","Cl4","Cl5","Cl6","Cl7","Cl8","Cl9","Cl10")

DF<- data.frame(Client,City,OnsetDate)

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

issue

我怎么能解决这个问题？

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>

Answer 2

This problem occurs because in the #text class you set the left to 150px which means it counts from the left 150px and shows the white text, while in the #textdx you set the right to 150px which means it counts from the right 150px and shows the white text. So, in order to solve the problem, just use the same property in both classes (right or left), like in the code below:

#text {
  ...
  left: 150px;
  ...
}

#textdx {
  ...
  left: 250px;
  ...
}

Please let me know if it helped you, or you expected something else.

自动调整图像HTML上的文本大小

2 个答案: