javascript - 在不失去响应能力的情况下将数字图像固定在挂板上

Question

我有 numberdisplay 类，我想在递接板中显示数字。

我有下面的代码，它在具有响应性的名称板内准确显示九个框。

My problem is that the digit of numberdisplay didn't get displayed in hanging board and is not responsive and is fixed, when window resizes the size an alignment changes.

我希望numberdisplayed在挂板内固定并且应该是响应式的。

如何做到这一点以及如何实现这一点？

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 10%;
  background-color: #99ffff;
}

.numberdisplay {
  margin-left: 73.99%;
  margin-top: 20%;
  margin-bottom: 100%;
  background-color: #ffff00 2px;
  border: px solid #000066;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

p {
  font: "Courier New", Courier, monospace;
  color: #000000;
  text-align: center;
}

body {
  background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
  background-size: 100vw 100vh;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.container2 {
  width: 35vw;
  position: fixed;
  top: 41.5vh;
  left: 14vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="7">8:10</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="4">5:35</p>
        </div>
      </div>
      <div id="2container">

        <div class="box" id="10">
          <p name="values" data-item-index="11">12:50</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="9">10:40</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="11">12:50</p>
        </div>
      </div>
      <div id="3container">

        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="3">4:45</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="2">3:50</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="numberdisplay" id="2">
  <img src="https://via.placeholder.com/75x75?text=11" style="width:160px; height:160px; border-radius: 50%;" border="rounded" />
</div>

Answer 1

我想不出任何方法来使用 CSS 或 JS 计算图像的一部分的 width 和 height。

但是，我可以用试算的方法计算出来，结果是挂板是0.16%背景宽度始终。

在 CSS 中所做的更改:

/* for .numberdisplay */
margin-left: 72.5%;
margin-top: 16%;

/* for body */
background-size: 100vw auto;

Javascript:

var body = document.querySelector('body');
var number11 = document.querySelector('.numberdisplay img');

function changeSize() {
  var length = parseInt(window.getComputedStyle(body, null).width) * 0.16; // based on hit and trial

  number11.style.height = length + 'px';
  number11.style.width = length + 'px';
}

window.onresize = changeSize;
changeSize();

我用过window.getComputedStyle(Element, null).property检索 body 的宽度。

Here is a Pen这将显示响应能力。